Alerts

<!--
  Day 19: Alerts

  Created by John Champ

  Founder of Pixelcave      -> https://pixelcave.com
  Building Tailkit          -> https://tailkit.com
  Let's connect on X        -> https://x.com/pixelcave_john
                on Bluesky  -> https://bsky.app/profile/pixelcave-john.bsky.social
-->

<!-- Alerts -->
<div
  class="relative mx-auto grid w-full max-w-2xl grid-cols-1 gap-3 rounded-3xl bg-white/50 p-3 shadow-sm shadow-slate-300 backdrop-blur-xs sm:p-6"
>
  <!-- Success -->
  <div
    class="flex items-center rounded-xl border border-emerald-200 bg-emerald-100 p-4 text-emerald-800"
  >
    <div class="mr-4 flex-none text-emerald-500">
      <svg
        class="hi-outline hi-check-circle inline-block size-6"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        aria-hidden="true"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
        />
      </svg>
    </div>
    <div>
      <h3 class="mb-1 font-bold">User was added successfully!</h3>
      <p class="text-sm font-medium">
        You now have 3,845 users in your web application.
      </p>
    </div>
  </div>
  <!-- END Success -->

  <!-- Warning -->
  <div
    class="flex items-center rounded-xl border border-orange-200 bg-orange-100 p-4 text-orange-800"
  >
    <div class="mr-4 flex-none text-orange-500">
      <svg
        class="hi-outline hi-exclamation-triangle inline-block size-6"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        aria-hidden="true"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
        />
      </svg>
    </div>
    <div>
      <h3 class="mb-1 font-bold">Please consider upgrading your plan!</h3>
      <p class="text-sm font-medium">
        You are reaching your storage limit, you currently use 1.95TB out of
        2TB.
      </p>
    </div>
  </div>
  <!-- END Warning -->

  <!-- Danger -->
  <div
    class="flex items-center rounded-xl border border-rose-200 bg-rose-100 p-4 text-rose-800"
  >
    <div class="mr-4 flex-none text-rose-500">
      <svg
        class="hi-outline hi-x-circle inline-block size-6"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        aria-hidden="true"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
        />
      </svg>
    </div>
    <div>
      <h3 class="mb-1 font-bold">Oops, the update didn't go through!</h3>
      <p class="text-sm font-medium">
        You are still on v1.5, please try again later, it seems that we have an
        issue with our servers.
      </p>
    </div>
  </div>
  <!-- END Danger -->

  <!-- Info -->
  <div
    class="flex items-center rounded-xl border border-sky-200 bg-sky-100 p-4 text-sky-800"
  >
    <div class="mr-4 flex-none text-sky-500">
      <svg
        class="hi-outline hi-information-circle inline-block size-6"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        aria-hidden="true"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
        />
      </svg>
    </div>
    <div>
      <h3 class="mb-1 font-bold">v5.0 new update is now available!</h3>
      <p class="text-sm font-medium">
        Tons of new features are waiting to be introduced to your app.
      </p>
    </div>
  </div>
  <!-- END Info -->
</div>
<!-- END Alerts -->