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.2k

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

Chat Bot

Author:
Md. Tofayel islam

3 months ago

324
Upvote downvote buttons [alpine]
upvote and downvote buttons made as working version in alpine.js

Author:
Anonymous

2 years ago

8.7k
Privacy policy page template

Author:
Sameer Sultana

2 years ago

18.2k
background animation
background animation

Author:
Anonymous

2 years ago

48.9k
Share button

Author:
Maxim

10 months ago

1.2k
Midnight Lava Lamp
Inspired by Steam's old "Big Picture" ambiance. Based on anonymous/background-animation-2

Author:
Nick Girga

5 months ago

838
Powerful Website Features
Open Layout Design: No traditional boxes - content flows naturally Gradient Accents: Vibrant color gradients for visual interest Animated Icons: Subtle floating animations on feature icons Hover Effects: Soft glow backgrounds appear on hover Tag System: Color-coded tags for each feature's attributes Dark Theme: Sophisticated dark background with perfect contrast

Author:
KULDEEP

3 months ago

687
Fancy underline

Author:
Simon Scheffer

2 years ago

12k
Certificate of Completion
A clean and modern certificate template built with Tailwind CSS. Ideal for courses, training programs, and professional achievements.

Author:
Ramkesh Gupta

2 weeks ago

48
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

7 months ago

476
Half filled circle with tailwind

Author:
Alok

2 years ago

13.2k
BONIMATOR Responsive Tailwind Starter Template
Responsive Tailwind Starter Template

Author:
Bonimater

4 months ago

613

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components