Home
nejaa badr
Forgot Password Form

Forgot Password Form

1. Color Updates:
1. Changed background to gradient `from-indigo-800 to-blue-900`
2. Updated text colors to match the new theme
3. Changed button colors to `bg-indigo-800` with `hover:bg-blue-900`
4. Updated focus rings to use indigo colors
5. Made footer links white with indigo hover states

2. Enhanced Styling:
1. Added gradient background
2. Improved border radius to `rounded-xl`
3. Enhanced shadow with `shadow-2xl`
4. Added hover scale effects
5. Added fade-in animation

3. Dark Mode Improvements:
1. Enhanced dark mode colors
2. Added system preference detection
3. Improved dark mode contrast
4. Updated dark mode focus rings

4. Added Functionality:
1. Added form validation
2. Added success message
3. Added form reset after submission
4. Added smooth transitions

5. Accessibility Improvements:
1. Maintained ARIA attributes
2. Enhanced focus states
3. Improved color contrast
4. Added transition animations for better UX

6. Added Interactions:
1. Hover effects on all interactive elements
2. Scale animation on card and button hover
3. Smooth color transitions
4. Form validation feedback

The form now matches the Indigo-800 and Blue-900 color scheme while maintaining dark mode support and adding enhanced animations and interactions.

This tailwind example is contributed by nejaa badr, on 30-Oct-2024. Component is made with Tailwind CSS v3. It is responsive.

Other

Author nejaa badr

1.7k

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>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gradient-to-r from-indigo-800 to-blue-900 flex items-center justify-center p-6">
    <main id="content" role="main" class="w-full max-w-md">
        <div class="mt-7 bg-white rounded-xl shadow-2xl dark:bg-gray-800 border-2 border-indigo-200 dark:border-indigo-900 transform transition-all duration-300 hover:scale-[1.01] animate-fade-in">
            <div class="p-4 sm:p-7">
                <div class="text-center">
                    <h1 class="block text-2xl font-bold text-indigo-800 dark:text-white mb-2">Forgot password?</h1>
                    <p class="text-sm text-gray-600 dark:text-gray-400">
                        Remember your password?
                        <a class="text-indigo-800 decoration-2 hover:text-blue-900 hover:underline font-medium transition-colors duration-300 dark:text-indigo-400 dark:hover:text-indigo-300" href="https://tailwindflex.com/@nejaa-badr/login-form-12">
                            Login here
                        </a>
                    </p>
                </div>

<div class="mt-5">
                    <form onsubmit="handleSubmit(event)">
                        <div class="grid gap-y-4">
                            <div>
                                <label for="email" class="block text-sm font-bold ml-1 mb-2 text-indigo-900 dark:text-white">
                                    Email address
                                </label>
                                <div class="relative">
                                    <input 
                                        type="email" 
                                        id="email" 
                                        name="email" 
                                        class="py-3 px-4 block w-full border-2 border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:border-indigo-800 focus:ring-2 focus:ring-indigo-800 dark:focus:ring-blue-900 dark:bg-gray-800 dark:text-white transition-all duration-300" 
                                        required 
                                        aria-describedby="email-error"
                                    >
                                </div>
                                <p class="hidden text-xs text-red-600 dark:text-red-400 mt-2" id="email-error">
                                    Please include a valid email address so we can get back to you
                                </p>
                            </div>
                            <button 
                                type="submit" 
                                class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-lg border border-transparent font-semibold bg-indigo-800 text-white hover:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-indigo-800 focus:ring-offset-2 transition-all duration-300 hover:scale-[1.02] dark:focus:ring-offset-gray-800"
                            >
                                Reset password
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

<p class="mt-3 flex justify-center items-center text-center divide-x divide-gray-300 dark:divide-gray-700">
            <a 
                class="pr-3.5 inline-flex items-center gap-x-2 text-sm text-white decoration-2 hover:underline hover:text-indigo-200 transition-colors duration-300" 
                href="https://github.com/Badrnej" 
                target="_blank"
            >
                <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
                </svg>
                View Github
            </a>
            <a 
                class="pl-3 inline-flex items-center gap-x-2 text-sm text-white decoration-2 hover:underline hover:text-indigo-200 transition-colors duration-300" 
                href="#"
            >
                Contact us!
            </a>
        </p>
    </main>

function handleSubmit(event) {
            event.preventDefault();
            const email = document.getElementById('email').value.trim();
            const errorElement = document.getElementById('email-error');
            
            // Basic email validation
            if (!email || !isValidEmail(email)) {
                errorElement.classList.remove('hidden');
                return;
            }
            
            errorElement.classList.add('hidden');
            alert('Password reset link has been sent to your email!');
            event.target.reset();
        }

function isValidEmail(email) {
            return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
        }
    </script>
</body>
</html>

Related Examples

🔥 Sleek & Modern Button with Hover Effect – Tailwind CSS
A beautifully designed button using Tailwind CSS, featuring smooth transitions, a bold shadow effect, and a hover animation. Styled with custom colors, rounded edges, and a modern font, this button is perfect for call-to-action (CTA) elements in your website or app. 🚀

Author:
Ahita Bisma Adlula

1 year ago

857
Responsive layout with header, main body, aside (sidebar) and footer

Author:
Ahmed Malik

2 years ago

12.4k
Invoice
Invoice

Author:
Ameth Galarcio

1 year ago

2.7k
Hacker terminal #fake
hacker terminal tailwind css

Author:
QQ-VVN

9 months ago

1k
Expandable File Tree with Tailwind and Vanilla JS with tailwinds 4
A simple and responsive file tree component built with Tailwind CSS and vanilla JavaScript. Each folder can be expanded or collapsed with smooth transitions, including the root directory. This component is useful for project explorers, code editors, or file management UIs.

Author:
Indra

5 months ago

549
htmlcss1

Author:
Anonymous

8 months ago

329
Simple dialpad

Author:
Brandon D

2 years ago

11.5k
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

10 months ago

1.4k
Apple Dock Navigation Bar

Author:
Cristian

1 year ago

2k
Skill showcase section for resume / porfolio website
show skill progression

Author:
Ava Brown

2 years ago

13.9k
Swiss-Grid Dark Pricing
A brutally minimalist pricing section that relies on strict grid architecture and typographic hierarchy instead of decorative elements. Features responsive border collapsing, monospaced technical accents, and high-performance CSS-only hover states. Designed for high-end SaaS, dev-tools, or agency portfolios that prioritize data clarity and structural rhythm.

Author:
Hamza Atig

2 months ago

86
Simple Payment Successfull Notification Page

Author:
Anonymous

9 months ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components