Zwei-Faktor-Authentifizierungskomponente

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 ease-in-out transform hover:scale-[1.01]">
    <div class="p-6 sm:p-8 flex flex-col items-center text-center">
      <div class="mb-6">
        <svg class="w-16 h-16 text-gray-800 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v3h8z"></path>
        </svg>
      </div>
      <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-gray-100 mb-3">Two-Factor Authentication</h2>
      <p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base leading-relaxed mb-6">
        For your security, we've sent a 6-digit verification code to your registered mobile device.
        Please enter it below to continue.
      </p>

      <div class="w-full space-y-4">
        <label for="verification-code" class="sr-only">Verification Code</label>
        <div class="flex justify-center space-x-2 sm:space-x-3">
          <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-3xl sm:text-4xl font-bold rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 caret-transparent transition-colors duration-200" value="" aria-label="Digit 1 of verification code">
          <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-3xl sm:text-4xl font-bold rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 caret-transparent transition-colors duration-200" value="" aria-label="Digit 2 of verification code">
          <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-3xl sm:text-4xl font-bold rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 caret-transparent transition-colors duration-200" value="" aria-label="Digit 3 of verification code">
          <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-3xl sm:text-4xl font-bold rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 caret-transparent transition-colors duration-200" value="" aria-label="Digit 4 of verification code">
          <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-3xl sm:text-4xl font-bold rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 caret-transparent transition-colors duration-200" value="" aria-label="Digit 5 of verification code">
          <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-3xl sm:text-4xl font-bold rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 caret-transparent transition-colors duration-200" value="" aria-label="Digit 6 of verification code">
        </div>

        <button type="submit" class="w-full py-3 px-4 rounded-lg bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900 font-semibold shadow-md hover:bg-gray-800 dark:hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 dark:focus:ring-gray-100 dark:focus:ring-offset-gray-800 transition-colors duration-200">
          Verify Code
        </button>
      </div>

      <div class="mt-6 text-sm text-gray-600 dark:text-gray-400">
        Didn't receive the code? 
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium transition-colors duration-200">
          Resend Code
        </a>
      </div>

      <div class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6 w-full text-left">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">What is 2FA?</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">
          Two-Factor Authentication (2FA) adds an extra layer of security to your account.
          It requires both your password and a second piece of information (like a code from your phone)
          to verify your identity before granting access.
        </p>
        <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mt-2">
          This protects your account even if your password is stolen.
        </p>
      </div>
    </div>
  </div>
</div>