Passo 11

Instruções

Neste momento o elemento div está posicionado no canto superior esquerdo da tela de visualização. Mas seria bom adicionar um pouco de espaço no topo do elemento. Para aplicar margin a um elemento usando Tailwind CSS, você pode usar o seguinte padrão: m-number, onde number representa os pixels fixos a serem aplicados em todos os quatro lados. Se você quiser aplicar margem a apenas um lado, pode usar qualquer um dos seguintes padrões: mt-number (margin top), mb-number (margin bottom), mr-number (margin right) e ml-number (margin left). Aqui está um exemplo de como aplicar margin-bottom a um elemento:

<p class="mb-8">This is margin.</p>

Dentro da sua tag de abertura div, use a classe utilitária correta para aplicar margin-top de 4px.

O que fazer:

Testes:

Sua tag de abertura `div` deve ter a classe utilitária `mt-4`.

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