Two-Factor Authentication Component

<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
  <div class="bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 p-8 rounded-xl shadow-2xl transform transition-all duration-300 hover:scale-105 border-4 border-gray-500 dark:border-gray-600">
    <div class="text-center mb-6">
      <h2 class="text-3xl font-extrabold text-gray-800 dark:text-gray-100 mb-2 drop-shadow-lg">2FA Required</h2>
      <p class="text-gray-600 dark:text-gray-300 text-sm">Please enter the verification code to proceed.</p>
    </div>

    <div class="flex justify-center space-x-3 mb-6">
      <input type="text" maxlength="1" class="w-12 h-16 text-center text-3xl font-bold bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-lg shadow-inner border-2 border-gray-400 dark:border-gray-600 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400 transition-all duration-200" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.2)"/>
      <input type="text" maxlength="1" class="w-12 h-16 text-center text-3xl font-bold bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-lg shadow-inner border-2 border-gray-400 dark:border-gray-600 focus:outline-none focus:border-red-500 dark:focus:border-red-400 transition-all duration-200" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.2)"/>
      <input type="text" maxlength="1" class="w-12 h-16 text-center text-3xl font-bold bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-lg shadow-inner border-2 border-gray-400 dark:border-gray-600 focus:outline-none focus:border-green-500 dark:focus:border-green-400 transition-all duration-200" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.2)"/>
      <input type="text" maxlength="1" class="w-12 h-16 text-center text-3xl font-bold bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-lg shadow-inner border-2 border-gray-400 dark:border-gray-600 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400 transition-all duration-200" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.2)"/>
    </div>

    <button class="w-full py-3 bg-gradient-to-r from-blue-500 to-cyan-600 text-white rounded-lg shadow-lg font-bold text-lg hover:from-blue-600 hover:to-cyan-700 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transform transition-all duration-200 active:scale-95 border-b-4 border-blue-700 dark:border-blue-900">
      Verify Code
    </button>

    <p class="text-center text-gray-500 dark:text-gray-400 text-xs mt-4">
      Didn't receive a code? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Resend</a>
    </p>
  </div>
</div>