Passo 4

Instruções

Tailwind CSS usa classes utilitárias que são aplicadas diretamente ao markup. Essas classes incluem estilos para fontes, cores, layouts Flexbox, Grid e mais. Para aplicar uma cor de fundo no Tailwind CSS, você pode usar o prefixo bg, seguido pelo nome da cor e um número. O número representa a tonalidade da cor. Aqui está um exemplo de aplicação de uma cor de fundo azul escuro a um elemento de parágrafo.

<p class="bg-blue-900">This has a dark blue background.</p>

No seu div de abertura, adicione uma classe com a classe utilitária bg-red-100 que representa uma cor de fundo vermelho claro.

O que fazer:

Testes:

Sua tag de abertura `div` deve ter um atributo class.
O atributo da sua classe deve ter a classe utilitária `bg-red-100`.

<!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>
    
      <p>
        <strong>Error!</strong> Something went wrong. Please try again.
      </p>
      <button aria-label="Dismiss">
        <span aria-hidden>&times;</span>
      </button>
    </div>
  </body>
</html>

Preview