Verification Modal

<!--
  Day 108: Verification 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
-->

<!-- Verification 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-start justify-between gap-2">
      <div>
        <h2 class="text-xl font-semibold text-zinc-950">Verify your email</h2>
        <p class="mt-1 text-sm text-zinc-600">
          Enter the verification code sent to your email address.
        </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-dashed 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-blue-100"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-shield-check inline-block size-6 text-blue-700"
            >
              <path
                d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
              />
              <path d="m9 12 2 2 4-4" />
            </svg>
          </div>
        </div>
        <div class="flex grow flex-col gap-6">
          <!-- Verification Instructions -->
          <div>
            <h3 class="font-medium text-zinc-950">
              Check your email for a verification code
            </h3>
            <p class="mt-1 text-sm/relaxed text-zinc-600">
              We've sent a 6-digit verification code to
              <span class="font-medium text-zinc-900">john.doe@example.com</span
              >. Please enter the code below to verify your email address.
            </p>
          </div>
          <!-- END Verification Instructions -->

          <!-- Verification Code Input -->
          <div>
            <label
              for="verification-code"
              class="mb-2 block text-sm font-medium text-zinc-900"
            >
              Verification code
            </label>
            <div class="flex gap-2">
              <input
                type="text"
                id="verification-code"
                name="verification-code"
                maxlength="6"
                pattern="[0-9]{6}"
                inputmode="numeric"
                placeholder="000000"
                class="max-w-32 grow rounded-lg border border-zinc-300 bg-white px-4 py-3 text-center text-lg font-semibold tracking-widest text-zinc-900 placeholder:text-zinc-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/50 focus:outline-hidden"
              />
            </div>
            <p class="mt-2 text-xs text-zinc-500">
              Didn't receive the code? Check your spam folder or request a new
              code.
            </p>
          </div>
          <!-- END Verification Code Input -->

          <!-- Info Box -->
          <div class="rounded-lg bg-orange-50 p-4 ring-1 ring-orange-200/50">
            <div class="flex items-center gap-3">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="lucide lucide-circle-alert inline-block size-6 text-orange-700"
              >
                <circle cx="12" cy="12" r="10" />
                <line x1="12" x2="12" y1="8" y2="12" />
                <line x1="12" x2="12.01" y1="16" y2="16" />
              </svg>
              <div class="grow">
                <h4 class="text-sm font-medium text-orange-900">
                  Verification code expires in 10 minutes
                </h4>
              </div>
            </div>
          </div>
          <!-- END Info Box -->
        </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-4 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-hidden active:bg-zinc-100"
      >
        Resend Code
      </button>
      <button
        type="button"
        class="flex items-center justify-center gap-2 rounded-lg border border-blue-600 bg-blue-600 px-4 py-2.5 text-sm font-medium text-white hover:border-blue-700 hover:bg-blue-700 focus:ring-2 focus:ring-blue-500/50 focus:ring-offset-2 focus:outline-hidden active:border-blue-800 active:bg-blue-800"
      >
        Verify Email
      </button>
    </div>
    <!-- END Modal Actions -->
  </div>
</div>
<!-- END Verification Modal -->