Alerts

                
<!-- Basic Alert -->
<div class="flex ioajsklehsnm spoathnmkles">
  <div class="flex layhetgsjdcb 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 layhetgsjdcb 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 layhetgsjdcb 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 layhetgsjdcb 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" x-data="{ open: true }" x-show="open" class="flex vlaoethsnkma layhetgsjdcb 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" @click="open = false">
    <span class="text-2xl">×</span>
  </button>
</div>

<!-- Alert with action button -->
<div id="alert_b" x-data="{ open: true }" x-show="open" class="flex vlaoethsnkma layhetgsjdcb relative bg-red-50 text-red-700 dkslaoeyhnmj py-8 rounded">
  <div>
    <div class="flex klsuaonrmcha vlaoethsnkma">
      <h3 class="text-title-lg font-bold mb-2">Warning</h3>

      <button type="button" @click="open = false">
        <span class="text-2xl">×</span>
      </button>
    </div>
    <p class="mb-6 me-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 klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 py-2.5 maksueyropls 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>