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.
Related Examples
-
Best Chatting dashboardcreate 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.
1.9k -
924 -
Interactive Game Flip Card – Pure HTML & CSS ComponentAn 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.
-
AI Trends ShowcaseA clean and modern intelligence feed component for showcasing AI, technology, startup, and research updates with automatic rotation, smooth navigation, and responsive layouts. Perfect For Showcase AI, technology, and innovation stories using a premium editorial-style carousel. Designed with a clean dark aesthetic, automatic slide rotation, interactive breadcrumbs, navigation controls, and a responsive layout that works seamlessly across desktop and mobile devices.
282 -
CalculatorA Basic Calculator
2.5k -
Rwanda-Canada Transport Services | Safe & Reliable ShippingAttractive color scheme inspired by Rwanda's landscapes
-
-
-
loginForm2form
69 -
Recipe cardA modern and responsive Tailwind CSS recipe card with image, ingredients, and instructions. Supports dark mode and mobile view.
1.8k -
Table ContentDashboard Table Content, with Sidebar Reusable for any window
2.9k -
Phone Simulator with Built-in Car Racing Game and Play.This is a complete virtual smartphone simulator built using HTML, CSS, Tailwind CSS, JavaScript, and Font Awesome Icons and mobile responsive . It provides a realistic phone interface with multiple apps, and the highlight is a fully playable Car Racing Game built right into it where you can actually play the car game.
645
Browse by topic
Explore components by Tags
Jump straight to the UI pattern you need.
Can't find it?
Didn't find the component you were looking for?
Search across 3,000+ community-built components and grab the code in seconds.