Modern OTP Verification Page with Resend Option - TailwindCSS

Modern OTP Verification Page with Resend Option - TailwindCSS Project by SudhuCodes Made with TailwindCSS Language

Project Creator

@SudhuCodes — A project contributor on SudhuCodes platform.

Category

TailwindCSS — This project belongs to the tailwindcss category.

Upload Date

7/14/2025 — Uploaded to the SudhuCodes project library.

Project Description

Download free project assets built using tailwindcss. This open-source project is part of the SudhuCodes initiative to support developers and learners.

1<!DOCTYPE html>
2<!-- ------Code with SudhuCodes------ -->
3<html lang="en">
4
5<head>
6    <meta charset="UTF-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>SudhuCodes - Modern OTP Verification Page with Resend Option - TailwindCSS</title>
9    <script src="https://cdn.tailwindcss.com"></script>
10    <script src="https://kit.fontawesome.com/c58add7555.js" crossorigin="anonymous"></script>
11</head>
12
13<body class="min-h-screen flex flex-col items-center justify-center bg-gray-100">
14
15    <div class="w-[350px] bg-white p-8 border rounded-xl shadow relative">
16        <i
17            class="fa-solid fa-x py-2 px-[13px] bg-white rounded-full text-sm shadow-[0px_0px_20px_#00000025] absolute top-3 right-3"></i>
18        <h2 class="text-center text-3xl font-bold pb-7">Enter OTP</h2>
19        <p class="text-center text-lg text-gray-600">We have sent a verification code to your mobile number</p>
20        <div class="grid grid-cols-4 px-8 gap-3 mt-5">
21            <input class="bg-gray-200 p-3 rounded-lg outline-none focus:border-indigo-300 border border-white"
22                type="text" maxlength="1">
23            <input class="bg-gray-200 p-3 rounded-lg outline-none focus:border-indigo-300 border border-white"
24                type="text" maxlength="1">
25            <input class="bg-gray-200 p-3 rounded-lg outline-none focus:border-indigo-300 border border-white"
26                type="text" maxlength="1">
27            <input class="bg-gray-200 p-3 rounded-lg outline-none focus:border-indigo-300 border border-white"
28                type="text" maxlength="1">
29        </div>
30        <button
31            class="bg-indigo-400 px-2 py-[10px] w-full text-xl text-white font-semibold mt-10 rounded-lg">Verify</button>
32        <p class="text-center mt-8">Didn't recived the code?</p>
33        <div class="text-center text-lg font-bold text-indigo-500">
34            <a href="#">Resend Code</a>
35        </div>
36    </div>
37
38</body>
39
40</html>

Live Preview

You're free to use this code for your personal or educational projects. If you use it publicly, consider giving credit to @SudhuCodes.

Want more beginner-friendly and open-source projects like this one? Browse the full library on the SudhuCodes homepage.

Have suggestions or improvements? Contact us or contribute on GitHub.