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

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

Elegant NavBar + Drawer
A NavBar, a responsive drawer/sidebar, and other useful Tailwind components to get started creating an app. Pure CSS, no JavaScript needed (although this example uses a bit of JS).

Author:
Nick Girga

1 month ago

360
Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

Author:
KULDEEP

1 day ago

17
Best Chatting dashboard
create a modern WhatsApp-like chat dashboard with 3D effects, animations, and a sleek design. This will be a static view showcasing the interface with Nicole Shalom as the developer.

Author:
Nicole Shalom

1 month ago

120
Animated bento box.
A Coastal UI component (coastalui.com). This can be used as part of a bento box, great for showing connectivity between context, could be used beyond just showing tech stacks.

Author:
Coastal UI

3 months ago

827
Icon group

Author:
Conan Hilton

2 years ago

9.4k
Help and support center ticketing system
Help and support center ticketing system

Author:
Rushikesh Latpate

4 months ago

611
Full Page loading overlay

Author:
Bunny

2 years ago

11.5k
Mobile app
I'll create a comprehensive collection of professional app components that you can use to build modern mobile and web applications.

Author:
ishimwe prince

1 month ago

40
image

Author:
pablitodgb

3 days ago

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

Author:
Rathanak Phan

2 weeks ago

21
Why Choose Us - Our Core Strengths
Discover what sets us apart with this engaging "Why Choose Us" section. Highlighting three key pillars—passion, honesty, and continuous improvement—this component features a bold, centered headline with a striking blue accent

Author:
Vikas Kushwah

3 months ago

507
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! 🔝💻

Author:
Abdul Baset Bappy

3 months ago

346

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components