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

880

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

Innovative Developer & Digital Creator
Innovative Developer

Author:
gidy

2 days ago

6
Services
This Services page design includes: 1. Responsive layout using Tailwind CSS grid system 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. Header with navigation 5. Six service cards with icons, titles, and descriptions 6. Footer with copyright information 7. Subtle animations and transitions 8. Accessibility considerations (proper heading structure, color contrast) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a white background in light mode and dark gray in dark mode - Service cards have a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - Icons use the Indigo-800 color (Indigo-400 in dark mode) for consistency - Each service card has a hover effect that scales it up slightly - Service cards fade in with a staggered delay for a smooth entrance - Dark mode is automatically applied based on system preferences - The design is fully responsive, adjusting from 1 to 3 columns based on screen size This design provides a clean, professional look for a services page while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

Author:
nejaa badr

6 months ago

1.3k
Hacker terminal #fake
hacker terminal tailwind css

Author:
QQ-VVN

2 weeks ago

119
Your upside-down text

Author:
Isabella Kowalski

2 years ago

12.3k
nft card
nft card

Author:
5upreme505

7 months ago

1.2k
Text Overlay Effect
This is a text overlay effect, featuring a subtle background title and a prominent foreground heading. This design enhances visual interest while maintaining a clean, modern aesthetic.

Author:
Anum Shahana

7 months ago

994
rotate card
rotate card

Author:
Tanvir Hasan Bappy (Tanvir)

6 months ago

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

5 days ago

30
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

1 month ago

144
Responsive Hero Section with Typewriter Effect
A modern hero section featuring a typewriter animation effect, social media links, and responsive design. Includes a user avatar placeholder and a clean dark gradient background. Built with Tailwind CSS and Font Awesome icons. Perfect for personal portfolio websites.

Author:
Muhammad Umair Arshad

2 months ago

136
Interactive Game Flip Card – Pure HTML & CSS Component
An elegant and interactive game info flip card built purely with HTML and CSS. This component flips smoothly on hover to reveal detailed game information on the back, providing a modern and engaging way to showcase your games without using JavaScript. Perfect for gaming websites wanting sleek animations and clean design.

Author:
Acode Master(Mfuranziza Dusabe Hamza)

1 week ago

117
Responsive Multi-Step Registration
Responsive Multi-Step Registration

Author:
Tanvir Hasan Bappy (Tanvir)

6 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components