Change Password With 2FA Code

<form class="w-full max-w-sm space-y-4" novalidate>
  <h2 class="text-base font-semibold text-gray-900 dark:text-gray-100">Change password</h2>
  <p class="text-sm text-gray-500 dark:text-gray-400">Confirm with the 6-digit code from your authenticator app.</p>

  <div>
    <label for="cp-new" class="block text-sm font-medium text-gray-700 dark:text-gray-300">New password</label>
    <input id="cp-new" name="newPassword" type="password" autocomplete="new-password"
      class="mt-1.5 block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm 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:focus-visible:ring-blue-400" />
  </div>

  <div>
    <label for="cp-code" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Verification code</label>
    <!-- inputmode=numeric brings the digit pad; autocomplete=one-time-code lets the OS offer the SMS/app code. -->
    <input id="cp-code" name="code" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6" placeholder="123456"
      class="mt-1.5 block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-center text-lg tracking-[0.4em] text-gray-900 shadow-sm placeholder:tracking-normal placeholder:text-gray-400 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:focus-visible:ring-blue-400" />
  </div>

  <button type="submit"
    class="inline-flex w-full items-center justify-center rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white 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 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950">
    Confirm and update
  </button>
</form>