Home
Ratikanta Pradhan
OTPverification

OTPverification

This tailwind example is contributed by Ratikanta Pradhan, on 04-Jul-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in,popup,dialog

Form Login Form Modal

Author Ratikanta Pradhan

Fork Fullscreen

<body class="bg-gray-100 flex items-center justify-center min-h-screen">
  <div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-md">
    <h1 class="text-2xl font-bold mb-4">Verify OTP</h1>
    <p class="mb-6">Enter the OTP sent to your email: <b><?= $_SESSION['email'] ?></b></p>

<form action="otp.php" method="POST">
      <div class="mb-4">
        <input type="text" name="otp" placeholder="Enter OTP" required
                    class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600">
      </div>
      <button type="submit" name="verify"
                class="w-full bg-green-600 text-white py-3 rounded-lg hover:bg-green-700 transition duration-300">
                Verify OTP
            </button>
    </form>

<form action="otp_verification.php" method="POST" class="mt-4">
      <button type="submit" name="resend"
                class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition duration-300"
                <?= !$otp_expired ? 'disabled class="opacity-50 cursor-not-allowed"' : '' ?>>
                Resend OTP
            </button>
    </form>

<p class="text-sm text-gray-500 mt-4">
      OTP expires in <span id="countdown">90</span> seconds.
    </p>
  </div>

function updateCountdown() {
            if (countdown > 0) {
                countdown--;
                countdownElem.textContent = countdown;
                setTimeout(updateCountdown, 1000);
            }
        }

updateCountdown();
  </script>
</body>

Related Examples