Two Factor Box

<!--
  Day 45: Two Factor Box

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

<!-- Two Factor Box -->
<div
  class="relative mx-auto w-full max-w-sm rounded-xl border border-zinc-200 bg-white ring-4 ring-zinc-300/25"
>
  <div class="flex grow items-center px-5 py-10 sm:px-10 sm:py-14">
    <div class="grow">
      <div class="text-center">
        <!-- Logo -->
        <svg
          width="49"
          height="40"
          viewBox="0 0 49 40"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          class="mb-4 inline-block w-10"
        >
          <path
            d="M37.3947 40C43.8275 39.8689 49 34.6073 49 28.1389C49 24.9931 47.7512 21.9762 45.5282 19.7518L25.7895 0V12.2771C25.7895 14.3303 26.6046 16.2995 28.0556 17.7514L32.6795 22.3784L32.6921 22.3907L40.4452 30.149C40.697 30.4009 40.697 30.8094 40.4452 31.0613C40.1935 31.3133 39.7852 31.3133 39.5335 31.0613L36.861 28.3871H12.139L9.46655 31.0613C9.21476 31.3133 8.80654 31.3133 8.55476 31.0613C8.30297 30.8094 8.30297 30.4009 8.55475 30.149L16.3079 22.3907L16.3205 22.3784L20.9444 17.7514C22.3954 16.2995 23.2105 14.3303 23.2105 12.2771V0L3.47175 19.7518C1.24882 21.9762 0 24.9931 0 28.1389C0 34.6073 5.17252 39.8689 11.6053 40H37.3947Z"
            fill="#FF0A0A"
          ></path>
        </svg>
        <!-- END Logo -->

        <h1 class="text-xl font-extrabold">Two factor Authentication</h1>
        <h2 class="mt-1 text-sm leading-relaxed text-zinc-600">
          Please enter the 6-digit code from your authenticator app.
        </h2>
      </div>
      <form class="mt-5 flex flex-col gap-5">
        <label class="sr-only">Authentication Code</label>
        <div class="flex items-center gap-1.5 sm:gap-2">
          <input
            type="text"
            required
            class="block w-full rounded-lg border border-zinc-200 bg-white px-0 py-2.5 text-center text-sm/6 font-medium placeholder-zinc-500 focus:border-zinc-500 focus:ring-3 focus:ring-zinc-500/50 focus:outline-hidden"
            maxlength="1"
          />
          <input
            type="text"
            required
            class="block w-full rounded-lg border border-zinc-200 bg-white px-0 py-2.5 text-center text-sm/6 font-medium placeholder-zinc-500 focus:border-zinc-500 focus:ring-3 focus:ring-zinc-500/50 focus:outline-hidden"
            maxlength="1"
          />
          <input
            type="text"
            required
            class="block w-full rounded-lg border border-zinc-200 bg-white px-0 py-2.5 text-center text-sm/6 font-medium placeholder-zinc-500 focus:border-zinc-500 focus:ring-3 focus:ring-zinc-500/50 focus:outline-hidden"
            maxlength="1"
          />
          <span class="text-sm text-zinc-400">-</span>
          <input
            type="text"
            required
            class="block w-full rounded-lg border border-zinc-200 bg-white px-0 py-2.5 text-center text-sm/6 font-medium placeholder-zinc-500 focus:border-zinc-500 focus:ring-3 focus:ring-zinc-500/50 focus:outline-hidden"
            maxlength="1"
          />
          <input
            type="text"
            required
            class="block w-full rounded-lg border border-zinc-200 bg-white px-0 py-2.5 text-center text-sm/6 font-medium placeholder-zinc-500 focus:border-zinc-500 focus:ring-3 focus:ring-zinc-500/50 focus:outline-hidden"
            maxlength="1"
          />
          <input
            type="text"
            required
            class="block w-full rounded-lg border border-zinc-200 bg-white px-0 py-2.5 text-center text-sm/6 font-medium placeholder-zinc-500 focus:border-zinc-500 focus:ring-3 focus:ring-zinc-500/50 focus:outline-hidden"
            maxlength="1"
          />
        </div>
        <button
          type="submit"
          class="flex w-full items-center justify-center gap-2 rounded-lg border border-zinc-800 bg-zinc-800 px-4 py-3 text-sm leading-5 font-medium text-white hover:border-zinc-900 hover:bg-zinc-900 hover:text-white focus:ring-2 focus:ring-zinc-500/50 focus:outline-hidden active:border-zinc-700 active:bg-zinc-700"
        >
          Submit
        </button>
        <div class="text-center text-xs font-medium text-zinc-500">
          <h5>Can't access your authentication app?</h5>
          <a
            href="javascript:void(0)"
            class="mt-1 inline-block text-zinc-800 underline decoration-slate-300 underline-offset-2 hover:text-zinc-900"
            >Send a recovery code</a
          >
        </div>
      </form>
    </div>
  </div>
</div>
<!-- END Two Factor Box -->