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

  <!-- Info Alert -->
<div class="mb-2 flex items-start gap-3 p-4 rounded-xl border border-blue-200 bg-blue-50 text-blue-800 dark:bg-blue-950 dark:border-blue-700 dark:text-blue-100 shadow-sm" role="alert">
  <svg class="w-5 h-5 mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
    <path d="M13 16h-1v-4h-1m1-4h.01M12 2a10 10 0 100 20 10 10 0 000-20z"/>
  </svg>
  <div>
    <p class="font-semibold">Information</p>
    <p class="text-sm">This is an informational alert with a description.</p>
  </div>
</div>

<!-- Success Alert -->
<div class="mb-2 flex items-start gap-3 p-4 rounded-xl border border-green-200 bg-green-50 text-green-800 dark:bg-green-950 dark:border-green-700 dark:text-green-100 shadow-sm" role="alert">
  <svg class="w-5 h-5 mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
    <path d="M5 13l4 4L19 7"/>
  </svg>
  <div>
    <p class="font-semibold">Success</p>
    <p class="text-sm">This is a success alert with a description.</p>
  </div>
</div>

<!-- Warning Alert -->
<div class="mb-2 flex items-start gap-3 p-4 rounded-xl border border-yellow-200 bg-yellow-50 text-yellow-800 dark:bg-yellow-950 dark:border-yellow-700 dark:text-yellow-100 shadow-sm" role="alert">
  <svg class="w-5 h-5 mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
    <path d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a1.5 1.5 0 001.29 2.25h17.78a1.5 1.5 0 001.29-2.25L13.71 3.86a1.5 1.5 0 00-2.42 0z"/>
  </svg>
  <div>
    <p class="font-semibold">Warning</p>
    <p class="text-sm">This is a warning alert with a description.</p>
  </div>
</div>

<!-- Error Alert -->
<div class="mb-2 flex items-start gap-3 p-4 rounded-xl border border-red-200 bg-red-50 text-red-800 dark:bg-red-950 dark:border-red-700 dark:text-red-100 shadow-sm" role="alert">
  <svg class="w-5 h-5 mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
    <path d="M6 18L18 6M6 6l12 12"/>
  </svg>
  <div>
    <p class="font-semibold">Error</p>
    <p class="text-sm">This is an error alert with a description.</p>
  </div>
</div>