Composant d’authentification à deux facteurs

<div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-950">
  <div class="relative w-full max-w-md p-8 overflow-hidden rounded-3xl backdrop-filter backdrop-blur-sm bg-gradient-to-br from-indigo-500/20 to-purple-700/20 dark:from-indigo-900/30 dark:to-purple-900/30 shadow-2xl transition-all duration-300 transform scale-95 hover:scale-100 ring-2 ring-purple-500 dark:ring-indigo-700">
    <div class="absolute top-0 -left-4 w-72 h-72 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob dark:bg-purple-700"></div>
    <div class="absolute top-0 -right-4 w-72 h-72 bg-indigo-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 dark:bg-indigo-700"></div>
    <div class="absolute -bottom-8 left-20 w-72 h-72 bg-pink-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000 dark:bg-pink-700"></div>

    <div class="relative z-10 text-center">
      <h2 class="text-4xl font-extrabold mb-4 text-white drop-shadow-[0_0_8px_rgba(168,85,247,0.7)] dark:drop-shadow-[0_0_8px_rgba(129,140,248,0.8)] sm:text-5xl">
        Verify Your Account
      </h2>
      <p class="text-lg mb-8 text-indigo-200 dark:text-indigo-300">
        Enter the 6-digit code sent to your email or phone.
      </p>

      <form class="space-y-6">
        <div class="flex justify-center gap-x-3 sm:gap-x-4">
          <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-20 text-center text-3xl font-bold rounded-xl bg-purple-900/50 text-white border-2 border-purple-500 focus:outline-none focus:ring-4 focus:ring-purple-400 focus:border-transparent transition-all duration-200 shadow-md glow-input dark:bg-indigo-900/50 dark:border-indigo-500 dark:focus:ring-indigo-400" aria-label="Digit 1">
          <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-20 text-center text-3xl font-bold rounded-xl bg-purple-900/50 text-white border-2 border-purple-500 focus:outline-none focus:ring-4 focus:ring-purple-400 focus:border-transparent transition-all duration-200 shadow-md glow-input dark:bg-indigo-900/50 dark:border-indigo-500 dark:focus:ring-indigo-400" aria-label="Digit 2">
          <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-20 text-center text-3xl font-bold rounded-xl bg-purple-900/50 text-white border-2 border-purple-500 focus:outline-none focus:ring-4 focus:ring-purple-400 focus:border-transparent transition-all duration-200 shadow-md glow-input dark:bg-indigo-900/50 dark:border-indigo-500 dark:focus:ring-indigo-400" aria-label="Digit 3">
          <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-20 text-center text-3xl font-bold rounded-xl bg-purple-900/50 text-white border-2 border-purple-500 focus:outline-none focus:ring-4 focus:ring-purple-400 focus:border-transparent transition-all duration-200 shadow-md glow-input dark:bg-indigo-900/50 dark:border-indigo-500 dark:focus:ring-indigo-400" aria-label="Digit 4">
          <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-20 text-center text-3xl font-bold rounded-xl bg-purple-900/50 text-white border-2 border-purple-500 focus:outline-none focus:ring-4 focus:ring-purple-400 focus:border-transparent transition-all duration-200 shadow-md glow-input dark:bg-indigo-900/50 dark:border-indigo-500 dark:focus:ring-indigo-400" aria-label="Digit 5">
          <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-20 text-center text-3xl font-bold rounded-xl bg-purple-900/50 text-white border-2 border-purple-500 focus:outline-none focus:ring-4 focus:ring-purple-400 focus:border-transparent transition-all duration-200 shadow-md glow-input dark:bg-indigo-900/50 dark:border-indigo-500 dark:focus:ring-indigo-400" aria-label="Digit 6">
        </div>

        <button type="submit" class="w-full py-3 px-6 rounded-lg text-xl font-semibold text-white bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-950 transition-all duration-300 shadow-lg neon-button">
          Verify Code
        </button>

        <p class="text-center text-white/80 dark:text-indigo-300 text-base sm:text-lg mt-4">
          Didn't receive the code?
          <a href="#" class="font-medium text-pink-400 hover:text-pink-300 dark:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 ring-offset-2 ring-offset-gray-100 dark:ring-offset-gray-950 focus:ring-2 focus:ring-pink-400 focus:outline-none rounded-md">
            Resend Code
          </a>
        </p>
      </form>
    </div>
  </div>
</div>

<style>
  /* This is for the custom animation and glow effects */
  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }

  .animate-blob {
    animation: blob 7s infinite;
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }

  .glow-input {
    box-shadow: 0 0 5px rgba(168, 85, 247, 0.5), inset 0 0 5px rgba(168, 85, 247, 0.5);
  }

  .dark .glow-input {
    box-shadow: 0 0 5px rgba(129, 140, 248, 0.6), inset 0 0 5px rgba(129, 140, 248, 0.6);
  }

  .glow-input:focus {
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.8), inset 0 0 10px rgba(168, 85, 247, 0.8), 0 0 0 4px rgba(168,85,247,0.4);
  }

  .dark .glow-input:focus {
    box-shadow: 0 0 10px rgba(129, 140, 248, 0.9), inset 0 0 10px rgba(129, 140, 248, 0.9), 0 0 0 4px rgba(129,140,248,0.5);
  }

  .neon-button {
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 15px rgba(168,85,247,0.6);
  }

  .neon-button:hover {
    box-shadow: 0 0 25px rgba(168,85,247,0.8), 0 0 40px rgba(168,85,247,0.4);
  }

  .dark .neon-button {
      box-shadow: 0 0 15px rgba(129,140,248,0.7);
  }

  .dark .neon-button:hover {
      box-shadow: 0 0 25px rgba(129,140,248,0.9), 0 0 40px rgba(129,140,248,0.5);
  }
</style>