<div class="bg-blue-50 border border-blue-200 text-blue-700 px-4 py-3 rounded shadow-sm mb-4" role="alert">
  <p class="font-semibold text-blue-700">Information</p>
  <p class="text-sm">This is an informational message.</p>
</div>
<div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded shadow-sm mb-4" role="alert">
  <p class="font-semibold text-green-700">Success</p>
  <p class="text-sm">This is a success message.</p>
</div>

<div class="bg-yellow-50 border border-yellow-200 text-yellow-700 px-4 py-3 rounded shadow-sm mb-4" role="alert">
  <p class="font-semibold text-yellow-700">Warning</p>
  <p class="text-sm">This is a warning message.</p>
</div>

<div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded shadow-sm mb-4" role="alert">
  <p class="font-semibold text-red-700">Error</p>
  <p class="text-sm">This is an error message.</p>
</div>