OTPverification

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

Form Login Form Modal

Author Ratikanta Pradhan

Tailwind v3.4 1.1k

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

Login Form with Icon

Prashant

4 years ago

18.9k
Login page with tailwind (SB admin 2)
This component features a split-screen design with a background image on one side and a registration form on the other.

Akshay

4 years ago

24.8k
Login form

Gopi Yadav

3 years ago

12k
Sign in / Login Form

Bunny

4 years ago

14.5k
Simple Login Form
Very basic responsive login form. The form is centered within a white card with a shadow, featuring input fields for username and password. The design is clean and user-friendly.

Bunny

4 years ago

50.6k
Login Form

Amit Pachange

4 years ago

13.7k
Sign In form

Amit Pachange

3 years ago

12.7k
Login form

Leon Bachmann

3 years ago

15.9k
User registration form

Leon Bachmann

3 years ago

25.8k
User registration form with Instructions

Fagundo67

3 years ago

25.2k
Login form

Leon Bachmann

3 years ago

14k
User registration form

Laurits

3 years ago

12.1k