Confirmation Modal

<!--
  Day 93: Confirmation Modal

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

<!-- Confirmation Modal -->
<div
  class="relative mx-auto w-full max-w-3xl rounded-3xl bg-white/40 p-4 shadow-sm backdrop-blur-xs"
>
  <div class="rounded-2xl bg-white p-5 ring-1 ring-zinc-200/50 sm:p-8">
    <!-- Modal Header -->
    <div class="flex items-center justify-between gap-2">
      <div>
        <h2 class="text-xl font-semibold text-zinc-950">Confirm Action</h2>
        <p class="mt-1 text-sm text-zinc-600">
          This action cannot be undone. Please review before proceeding.
        </p>
      </div>
      <button
        type="button"
        class="rounded-lg p-2 text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600"
        aria-label="Close"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="hi-outline hi-x-mark inline-block size-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M6 18 18 6M6 6l12 12"
          />
        </svg>
      </button>
    </div>
    <!-- END Modal Header -->

    <!-- Modal Content -->
    <div class="my-6 border-y border-zinc-200 py-6">
      <div class="flex flex-col items-start gap-4 sm:flex-row">
        <div class="flex-none">
          <div
            class="flex size-12 items-center justify-center rounded-full bg-rose-100"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="hi-outline hi-exclamation-triangle inline-block size-6 text-rose-600"
            >
              <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>
        <div class="grow">
          <h3 class="font-medium text-zinc-950">Delete user account</h3>
          <p class="mt-1 text-sm/relaxed text-zinc-600">
            Are you sure you want to delete this user account? All data
            associated with this account will be permanently removed from our
            servers. This action cannot be undone.
          </p>
        </div>
      </div>
    </div>
    <!-- END Modal Content -->

    <!-- Modal Actions -->
    <div class="flex flex-col justify-end gap-3 sm:flex-row">
      <button
        type="button"
        class="flex items-center justify-center gap-2 rounded-lg border border-zinc-200 bg-white px-6 py-2.5 text-sm font-medium text-zinc-700 hover:bg-zinc-50 focus:ring-2 focus:ring-zinc-500/50 focus:ring-offset-2 focus:outline-none active:bg-zinc-100"
      >
        Cancel
      </button>
      <button
        type="button"
        class="flex items-center justify-center gap-2 rounded-lg border border-rose-600 bg-rose-600 px-6 py-2.5 text-sm font-medium text-white hover:border-rose-700 hover:bg-rose-700 focus:ring-2 focus:ring-rose-500/50 focus:ring-offset-2 focus:outline-none active:border-rose-800 active:bg-rose-800"
      >
        Delete Account
      </button>
    </div>
    <!-- END Modal Actions -->
  </div>
</div>
<!-- END Confirmation Modal -->