Passo 5

Instruções

Seria bom ter uma borda ao redor daquele fundo vermelho claro. Para definir o border-width no Tailwind CSS, você pode usar a classe utilitária border-number onde number representará a leveza ou espessura da sua borda. Aqui está um exemplo de aplicação de um border-width de 4px em todos os lados:

<p class="border-4">This is how to set the border-width.</p>

Dentro da sua tag de abertura div, adicione a classe utilitária correta para um border-width definido como 2px em todos os lados.

O que fazer:

Testes:

Sua tag de abertura `div` deve ter uma classe `border-2`.

<!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">
    
      <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