Two-Factor Code Sign-in

<!--
  A single numeric input, not six separate boxes. inputMode="numeric" gets the
  digit keypad on mobile, and autocomplete="one-time-code" lets iOS/Android
  offer the SMS code straight from the keyboard bar - the one attribute that
  actually makes 2FA fast. tracking + text-center fakes the segmented look
  without the focus-management cost of six inputs.
-->
<div class="mx-auto w-full max-w-sm rounded-2xl border border-gray-200 bg-white p-6 text-center shadow-sm sm:p-8 dark:border-gray-800 dark:bg-gray-950">
  <h1 class="text-xl font-bold tracking-tight text-gray-900 dark:text-gray-100">Two-factor authentication</h1>
  <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Enter the 6-digit code from your authenticator app.</p>

  <form class="mt-6 space-y-4" action="#" method="post">
    <div class="text-left">
      <label for="otp-code" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Verification code</label>
      <input
        id="otp-code"
        name="code"
        type="text"
        inputmode="numeric"
        autocomplete="one-time-code"
        pattern="[0-9]*"
        maxlength="6"
        required
        placeholder="000000"
        class="mt-1.5 w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 text-center text-lg font-semibold tracking-[0.5em] text-gray-900 placeholder:tracking-[0.5em] placeholder:text-gray-400 focus-visible:border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-600 dark:focus-visible:ring-blue-400"
      />
    </div>
    <button type="submit" class="w-full rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950">Verify</button>
  </form>

  <button type="button" class="mt-4 text-sm font-medium text-blue-600 hover:text-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-blue-400 dark:hover:text-blue-300 dark:focus-visible:ring-blue-400">Resend code</button>
</div>