Alerts

              
<!-- Basic Alert -->
<div class="flex flex-col gap-4">
  <div class="flex items-center gap-2 relative bg-red-50 text-red-700 p-4 rounded">
    <i class="material-symbols-outlined">info</i>
    <p>This is a danger alert—check it out!</p>
  </div>
  <div class="flex items-center gap-2 relative bg-yellow-50 text-yellow-700 p-4 rounded">
    <i class="material-symbols-outlined">info</i>
    <p>This is a warning alert—check it out!</p>
  </div>
  <div class="flex items-center gap-2 relative bg-green-50 text-green-700 p-4 rounded">
    <i class="material-symbols-outlined">info</i>
    <p>This is a success alert—check it out!</p>
  </div>
  <div class="flex items-center gap-2 relative bg-cyan-50 text-slate-700 p-4 rounded">
    <i class="material-symbols-outlined">info</i>
    <p>This is a info alert—check it out!</p>
  </div>
</div>

<!-- Dismiss Alert with Link -->
<div id="alert_a" class="show [&.show]:flex hidden justify-between items-center relative bg-yellow-50 text-yellow-700 p-4 rounded">
  <div>
    <a href="#" class="hover:underline font-bold">Dismiss Warning!</a> You should check in on some of those fields below.
  </div>
  <button type="button" data-close="#alert_a">
    <span class="text-2xl">×</span>
  </button>
</div>

<!-- Alert with action button -->
<div id="alert_b" class="show [&.show]:flex hidden justify-between items-center relative bg-red-50 text-red-700 px-6 py-8 rounded">
  <div>
    <div class="flex flex-row justify-between">
      <h3 class="text-title-lg font-bold mb-2">Warning</h3>

      <button type="button" data-close="#alert_b">
        <span class="text-2xl">×</span>
      </button>
    </div>
    <p class="mb-6 mr-6 text-body-lg">Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>

    <button class="btn relative inline-flex flex-row items-center justify-center gap-x-2 py-2.5 px-8 rounded-[6.25rem] hover:shadow-md text-sm tracking-[.00714em] font-medium bg-error-600 text-white dark:bg-error-200 dark:text-error-800">
      Try Now!
    </button>
  </div>
</div>