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 v3.4. It is responsive.

Other

Author nejaa badr

Tailwind v3.4 2.3k 6

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

Pixel Blast
Pixel Blast

Raul antonio de la cruz hernandez

11 months ago

1.3k
Life Tree
by salvator

Baraka Salvator

1 year ago

1.3k
coffee
a beverage brewed from the roasted and ground seeds of the tropical evergreen coffee plant. Coffee is one of the three most popular beverages in the world (alongside water and tea), and it is one of the most profitable international commodities

Augustin

1 year ago

1.4k
3D Coverflow Slider — Ambient Background
A depth-based 3D slider with real perspective and rotateY transforms (not just fade), paired with a drifting polyhedra background that responds to cursor movement. Zero dependencies — pure Tailwind utilities, one config file, and vanilla JS. Auto-plays, pauses on hover, fully keyboard/dot-navigable. Swap the color tokens in the config to reskin it.

Azeem warraich

3 weeks ago

114
Card blog
Targeta para blog

Raul antonio de la cruz hernandez

10 months ago

646
trusted by
1. Color Scheme: 1. Updated the background to a gradient from Indigo-800 to Blue-900 2. Changed text colors to use Indigo-800 and Blue-900 shades 3. Updated ring colors on avatar images to match the new scheme 2. Enhanced Design: 1. Added a containing card with white background (dark gray in dark mode) 2. Increased the size of avatar images for better visibility 3. Added a shadow effect to the card that changes color on hover 3. Responsiveness: 1. Maintained the responsive layout, stacking vertically on smaller screens 4. Animations and Interactions: 1. Added a fade-in animation for the entire component 2. Enhanced hover effects on avatar images (scale and z-index change) 3. Added a ring effect on hover for each avatar 5. Accessibility: 1. Maintained alt text for images 2. Ensured proper color contrast for text readability 6. Dark Mode: 1. Implemented dark mode support 2. Adjusted colors and ring effects for dark mode 7. Additional Enhancements: 1. Increased font sizes for better readability 2. Added font weight variations to emphasize important text 3. Improved spacing and alignment This updated component maintains the original functionality while incorporating the Indigo-800 and Blue-900 color scheme and adding enhanced visual effects and interactions.

nejaa badr

1 year ago

2.2k
Invoice
simpel invoice digital

Rushikesh Latpate

1 year ago

1.2k
Interactive 3D Morphing Globe - Sphere to Star
3D interactive particle globe that morphs between a sphere and a star shape. Features custom glassmorphism UI, click-to-pulse bloom effects, and dynamic color themes. Built by Mostafa Niloy (Visernic Limited) using Three.js and Tailwind CSS.

Visernic

3 months ago

429
Frontend Template Open Source Code Website
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Rathanak Phan

1 year ago

2k
Testimonial that What Client Says

Abdul Baset Bappy

1 year ago

1.9k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Ameth Galarcio

2 years ago

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