Passo 17

Instruções

Para finalizar a estilização do botão, adicione a classe utilitária font-semibold a cada elemento a para que seu texto fique mais negrito. Além disso, adicione a classe rounded para remover as bordas afiadas dos botões.

O que fazer:

Testes:

Seu primeiro elemento anchor deve ter a classe utilitária `font-semibold`.
Seu primeiro elemento anchor deve ter a classe utilitária `rounded`.
Seu segundo elemento anchor deve ter a classe utilitária `font-semibold`.
Seu segundo elemento anchor deve ter a classe utilitária `rounded`.

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

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

Preview