Passo 16

Instruções

Para fazer as tags de âncora parecerem mais com um botão, adicione as classes px-4 e py-2 a cada uma delas. px-4 aumentará o padding direito e esquerdo em 1rem e py-2 aumentará o padding superior e inferior em 0.5rem.

O que fazer:

Testes:

Seu primeiro elemento anchor deve ter a classe utilitária `px-4`.
Seu primeiro elemento anchor deve ter a classe utilitária `py-2`.
Seu segundo elemento anchor deve ter a classe utilitária `px-4`.
Seu segundo elemento anchor deve ter a classe utilitária `py-2`.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CTA component</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div class="bg-indigo-600 text-white mt-8 p-4 md:w-1/2 mx-auto flex flex-col lg:flex-row justify-around items-center rounded-md">
      <div>
        <span class="uppercase">Soundflow</span>
        <h1 class="font-bold text-4xl my-4">Discover New Music</h1>
        <p>Stream your favorite tracks and discover new artists.</p>
      </div>
      <div>
        
        <a
          href="#"
          class="bg-white hover:bg-gray-100 text-indigo-600"
        >
          Learn more
        </a>
        <a
          href="#"
          class="bg-pink-500 hover:bg-pink-600 text-white"
         >
          Start listening
        </a>
        
      </div>
    </div>
  </body>
</html>

Preview