Alert

            
<!-- alert primary -->
<div class="py-3 px-4 rounded text-sm flex gap-2 items-center justify-between bg-primary-50 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-inset-fixed text-primary-600 dark:text-primary-200">
  <div class="flex items-center gap-2">
    <span>✓</span>
    This is a primary message. Click the close button to hide the alert.
  </div>
</div>

<!-- alert warning -->
<div class="py-3 px-4 rounded text-sm flex gap-2 items-center justify-between bg-primary-50 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-inset-fixed text-yellow-600 dark:text-yellow-200">
  <div class="flex items-center gap-2">
    <span>✓</span>
    This is a warning message. Click the close button to hide the alert.
  </div>
</div>

<!-- alert success -->
<div class="py-3 px-4 rounded text-sm flex gap-2 items-center justify-between bg-primary-50 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-inset-fixed text-green-600 dark:text-green-200">
  <div class="flex items-center gap-2">
    <span>✓</span>
    This is a success message. Click the close button to hide the alert.
  </div>
</div>

<!-- alert danger with close -->
<div id="alert_a" class="show [&.show]:flex hidden py-3 px-4 rounded text-sm gap-2 items-center justify-between bg-primary-50 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-inset-fixed text-red-600 dark:text-red-200">
  <div class="flex items-center gap-2">
    <span>✓</span>
    This is a danger message. Click the close button to hide the alert.
  </div>
  <button type="button" data-close="#alert_a">
    <span class="text-2xl">×</span>
  </button>
</div>

<!-- alert info with close -->
<div id="alert_b" class="show [&.show]:flex hidden py-3 px-4 rounded text-sm gap-2 items-center justify-between bg-primary-50 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-inset-fixed text-sky-600 dark:text-sky-200">
  <div class="flex items-center gap-2">
    <span>✓</span>
    This is a info message. Click the close button to hide the alert.
  </div>
  <button type="button" data-close="#alert_b">
    <span class="text-2xl">×</span>
  </button>
</div>