Passo 15

Instruções

O parágrafo sob o h1 está bom, então não precisa de mais estilização. Isso significa que você pode navegar para os elementos anchor dentro do segundo elemento div. Dê ao primeiro elemento anchor as classes bg-white, hover:bg-gray-100 e text-indigo-600. Isso dá a ele um fundo branco, uma cor de texto índigo e um fundo ligeiramente claro quando você passa o mouse sobre ele. Para o segundo elemento anchor, dê a ele as classes bg-pink-500, hover:bg-pink-600 e text-white.

O que fazer:

Testes:

Seu primeiro elemento anchor deve ter a classe utilitária `bg-white`.
Seu primeiro elemento de âncora deve ter a classe utilitária `hover:bg-gray-100`.
Seu primeiro elemento anchor deve ter a classe utilitária `text-indigo-600`.
Seu segundo elemento anchor deve ter a classe utilitária `bg-pink-500`.
Seu segundo elemento anchor deve ter a classe utilitária `hover:bg-pink-600`.
Seu segundo elemento anchor deve ter a classe utilitária `text-white`.

<!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="#">
          Learn more
        </a>
        <a href="#">
          Start listening
        </a>
        
      </div>
    </div>
  </body>
</html>

Preview