Forgot Password

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

Other

Author Tanvir Hasan Bappy (Tanvir)

Tailwind v3.4 648

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

Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Abhiraj

1 year ago

2k
Clean & Responsive Footer Design with Tailwind CSS With CTA Button
modern and responsive footer built with Tailwind CSS to enhance website navigation, accessibility, and user experience. Featuring quick links, social media icons, copyright info, and a sleek layout, this SEO-friendly footer improves engagement and usability across all devices. Perfect for portfolios, business websites, and eCommerce stores!

Abdul Baset Bappy

1 year ago

1.5k
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Ayyamperumal S

1 year ago

2.8k
Question & Answer
questions and answers

Anonymous

3 years ago

9.3k
Hero Section with Tailwind CSS With Buttons
A modern, responsive Hero Section designed with Tailwind CSS to capture attention and drive engagement. Featuring a bold heading, compelling CTA buttons, and a high-quality image, this design enhances user experience and conversions. Ideal for landing pages, portfolios, and business websites, ensuring a strong first impression and higher interaction rates.

Abdul Baset Bappy

1 year ago

1.4k
Get in Touch – Let's Connect! Responsive Contact Section Using TailwindCSS
Need a website, have a project idea, or just want to say hello? Feel free to reach out! My Contact Section is built with Tailwind CSS, ensuring a clean, responsive, and user-friendly experience. Drop me a message, and let's create something amazing together!

Abdul Baset Bappy

1 year ago

1.9k
Elegant Dock
Useful Tailwind classes for constructing a basic Dock (usually used on mobile).

Nick Girga

1 year ago

1.3k
Pricing Plans
This plan offers access to all basic features, including unlimited projects and 24/7 support

Rathanak Phan

1 year ago

1k
Terms of Service Page Template

Anonymous

1 year ago

2.9k
Floating "Go to Top" Button with Tailwind CSS
🚀 Boost your website’s user experience with a sleek floating "Go to Top" button! This easy-to-implement solution uses Tailwind CSS for styling. ✔️ Smooth scroll to top ✔️ Clean and modern design ✔️ Responsive and animated effects Perfect for any website or portfolio! Add it today and make navigation effortless! 🔝💻

Abdul Baset Bappy

1 year ago

1.5k
Acode Master!
Acode Master is a skilled and passionate software developer known for mastering coding and creating innovative tech solutions. Specializing in modern web technologies like React.js, Node.js, PHP, and databases such as MySQL and PostgreSQL, Acode Master builds practical, efficient, and scalable applications. Beyond coding, Acode Master is dedicated to continuous learning, sharing knowledge, and empowering others through technology-driven projects and education.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.2k
اصقل جسدك صفحة Landing

Hasan AlDoy (McDoy)

4 months ago

191