Modern and User-Friendly Password Reset UI Built with TailwindCSS

Modern and User-Friendly Password Reset UI Built with 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/9/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 and User-Friendly Password Reset UI Built with TailwindCSS</title>
9    <script src="https://cdn.tailwindcss.com"></script>
10    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
11</head>
12
13<body class="h-screen flex flex-col items-center justify-center bg-gray-100">
14
15    <div class="text-center border w-[340px] bg-white shadow-sm rounded-lg p-4 py-8 flex flex-col items-center">
16        <div class="py-1 px-[8px] shadow bg-blue-400 rounded-full flex items-center justify-center">
17            <span class="material-symbols-outlined text-2xl rotate-[25deg] text-white">key</span>
18        </div>
19        <p class="text-2xl font-bold text-gray-800 mt-6">Forgot password?</p>
20        <p class="text-sm text-gray-500 mt-2">Don't worry we'll send you reset instruction.</p>
21
22        <div class="mt-6 w-full text-left">
23            <label class="text-sm text-gray-700 mb-2 block font-medium">Email address</label>
24            <input
25                class="border border-gray-300 w-full h-12 rounded-lg outline-none p-3 text-sm focus:border-indigo-400 transition ease-in-out duration-200"
26                type="email" placeholder="Enter your email">
27        </div>
28
29        <button
30            class="w-full h-12 mt-6 bg-blue-500 text-white rounded-lg font-semibold shadow-md transition-transform transform hover:-translate-y-[2px] ease-in-out duration-300">
31            Reset Password
32        </button>
33    </div>
34    <div class="flex items-center text-sm p-3 text-gray-600">
35        <p class="pr-2">Remember your password? <a class="text-blue-600 hover:underline font-semibold" href="#">Sign in
36                here</a></p>
37        <a class="pl-2 border-l border-gray-400 hover:underline hover:text-blue-600" href="#">Contact Support</a>
38    </div>
39
40</body>
41
42</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.