Passo 19

Instruções

Agora é hora de aplicar alguns estilos ao elemento button. Comece adicionando um atributo class ao seu elemento button. Em seguida, aplique a classe utilitária correta para definir a cor do texto vermelho com o tom definido para 700. Então, dentro da sua tag de abertura button, use a classe utilitária correta para definir o font-size para 2xl que representa 1.5rem ou (24px).

O que fazer:

Testes:

Seu elemento `button` deve ter um atributo class.
Sua tag de abertura `button` deve ter a classe utilitária `text-red-700`.
Sua tag de abertura `button` deve ter a classe utilitária `text-2xl`.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Error Message Component</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>  
    <div class="bg-red-100 border-2 border-red-300 rounded-md md:w-1/2 p-4 mt-4 md:mx-auto flex gap-4 justify-center">
      <p class="text-red-700 text-xl">
        <strong>Error!</strong> Something went wrong. Please try again.
      </p>
      
      <button aria-label="Dismiss">
      
        <span aria-hidden>&times;</span>
      </button>
    </div>
  </body>
</html>

Preview