Passo 18

Instruções

Por fim, os botões podem ter um espaçamento melhor entre si e em relação ao topo. Para fazer isso, você precisa direcionar o elemento div que os envolve ambos. Então, adicione as classes flex, gap-2 e mt-6 a esse div. Com isso, seu workshop do componente CTA está completo!

O que fazer:

Testes:

O elemento `div` que envolve os elementos anchor deve ter a classe utilitária `flex`.
O elemento `div` que envolve os elementos anchor deve ter a classe utilitária `gap-2`.
O elemento `div` que envolve os elementos anchor deve ter a classe utilitária `mt-6`.

<!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 px-4 py-2 font-semibold rounded"
        >
          Learn more
        </a>
        <a
          href="#"
          class="bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 font-semibold rounded"
         >
          Start listening
        </a>
      </div>

    </div>
  </body>
</html>

Preview