Forgot Password

This tailwind example is contributed by Tanvir Hasan Bappy (Tanvir), on 28-Dec-2025. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Tanvir Hasan Bappy (Tanvir)

103

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Forgot Password</title>
    
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        /* Custom fade-in animation (reused from login page) */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-20px); /* Optional: slight slide-down effect */
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

/* Apply the animation to an element */
        .animate-fade-in {
            animation: fadeIn 0.8s ease-out forwards;
        }
    </style>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
    <div class="bg-white p-8 rounded-lg shadow-md w-full max-w-sm animate-fade-in">
        <h2 class="text-2xl font-bold text-center mb-4 text-gray-800">Forgot Password?</h2>
        <p class="text-center text-gray-600 mb-6 text-sm">
            Enter your email address below and we'll send you a link to reset your password.
        </p>
        <form action="#" method="POST">
            <div class="mb-6">
                <label for="email" class="block text-gray-700 text-sm font-bold mb-2">Email Address</label>
                <input
                    type="email"
                    id="email"
                    name="email"
                    placeholder="your@example.com"
                    class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:border-blue-500"
                    required
                >
            </div>
            <div class="flex items-center justify-between">
                <button
                    type="submit"
                    class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full"
                >
                    Send Reset Link
                </button>
            </div>
        </form>
        <div class="text-center mt-6">
            <a href="login.html" class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800">
                Back to Login
            </a>
        </div>
    </div>
</body>
</html>

Related Examples

Muhammad Umair Arshad - Frontend Developer Resume | React, TypeScript, Tailwind CSS
Professional resume of Muhammad Umair Arshad, a skilled Frontend Developer specializing in React, TypeScript, and Tailwind CSS. I build high-performance web applications with responsive UI design.

Author:
Muhammad Umair Arshad

9 months ago

1.1k
card

Author:
Raul antonio de la cruz hernandez

2 weeks ago

30
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

9 months ago

1.4k
Table CRUD
CRUD TABLE DESIGN

Author:
Abhiraj

11 months ago

3.6k
why chose us
Designed with clarity and purpose, each section of our website is crafted to guide users effortlessly from engaging visuals to structured content that highlights our values and builds trust at every scroll. abnahid.com

Author:
Abdul Jabbar Al Nahid

2 months ago

290
Privacy policy page template

Author:
Anonymous

1 year ago

2.8k
Multi Step form with javascript
A Beautiful multi step form using HTML CSS and JS

Author:
Walid Ahmad

1 year ago

1.3k
cards
cards with background animation

Author:
Anonymous

1 year ago

3.1k
Ethical Fashion

Author:
Tanvir Hasan Bappy (Tanvir)

11 months ago

1.1k
Order History
Order History

Author:
Tanvir Hasan Bappy (Tanvir)

9 months ago

1.1k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

11 months ago

1.9k
blockquote

Author:
Freja Jensen

3 years ago

10.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components