<div class="bg-blue-100 border-t border-b border-blue-500 text-blue-700 px-4 py-3" role="alert">
  <p class="font-bold">Information</p>
  <p class="text-sm">This is an informational alert with a description.</p>
</div>
<div class="bg-green-100 border-t border-b border-green-500 text-green-700 px-4 py-3" role="alert">
  <p class="font-bold">Success</p>
  <p class="text-sm">This is a success alert with a description.</p>
</div>
<div class="bg-yellow-100 border-t border-b border-yellow-500 text-yellow-700 px-4 py-3" role="alert">
  <p class="font-bold">Warning</p>
  <p class="text-sm">This is a warning alert with a description.</p>
</div>
<div class="bg-red-100 border-t border-b border-red-500 text-red-700 px-4 py-3" role="alert">
  <p class="font-bold">Error</p>
  <p class="text-sm">This is an error alert with a description.</p>
</div>