Home
nejaa badr
Login Form

Login Form

Color Updates:
- Changed background to gradient `from-indigo-800 to-blue-900`
- Updated text colors to match the new theme
- Updated button and interactive element colors
- Added dark mode color variants

Enhanced Styling:
- Added gradient background
- Increased padding and spacing
- Improved border radius to `rounded-xl`
- Added hover scale effects
- Enhanced shadow with `shadow-2xl`

Added Animations:
- Fade-in animation on load
- Scale transition on card hover
- Button ripple effect on click
- Smooth transitions for all interactive elements

Improved Dark Mode:
- Enhanced dark mode colors
- Added system preference detection
- Improved dark mode contrast
- Added dark mode specific focus rings

Enhanced Functionality:
- Added basic form validation
- Added ripple effect on button click
- Improved hover and focus states
- Added transition animations

Accessibility Improvements:
- Maintained proper contrast ratios
- Enhanced focus states
- Added proper ARIA attributes
- Improved form labels

This tailwind example is contributed by nejaa badr, on 30-Oct-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Author nejaa badr

2.1k

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <div class="min-h-screen flex items-center justify-center w-full bg-gradient-to-r from-indigo-800 to-blue-900 dark:bg-gradient-to-r dark:from-gray-900 dark:to-gray-950 p-4">
        <div class="bg-white dark:bg-gray-900 shadow-2xl rounded-xl px-8 py-6 max-w-md w-full transform transition-all duration-300 hover:scale-[1.01] animate-fade-in">
            <h1 class="text-3xl font-bold text-center mb-8 text-indigo-800 dark:text-gray-200">Welcome Back!</h1>
            <form action="#" class="space-y-6">
                <div>
                    <label for="email" class="block text-sm font-medium text-indigo-900 dark:text-gray-300 mb-2">
                        Email Address
                    </label>
                    <input 
                        type="email" 
                        id="email" 
                        class="shadow-sm rounded-lg w-full px-4 py-2.5 border border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-800 dark:focus:ring-blue-900 transition-all duration-300" 
                        placeholder="your@email.com" 
                        required
                    >
                </div>

<div>
                    <label for="password" class="block text-sm font-medium text-indigo-900 dark:text-gray-300 mb-2">
                        Password
                    </label>
                    <input 
                        type="password" 
                        id="password" 
                        class="shadow-sm rounded-lg w-full px-4 py-2.5 border border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-800 dark:focus:ring-blue-900 transition-all duration-300" 
                        placeholder="Enter your password" 
                        required
                    >
                    <a href="https://tailwindflex.com/@nejaa-badr/forgot-password-form-2" 
                        class="inline-block mt-2 text-sm text-indigo-800 hover:text-blue-900 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors duration-300">
                        Forgot Password?
                    </a>
                </div>

<div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <input 
                            type="checkbox" 
                            id="remember" 
                            class="h-4 w-4 rounded border-gray-300 text-indigo-800 focus:ring-indigo-800 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-900 transition-colors duration-300" 
                            checked
                        >
                        <label for="remember" class="ml-2 block text-sm text-indigo-900 dark:text-gray-300">
                            Remember me
                        </label>
                    </div>
                    <a href="https://tailwindflex.com/@nejaa-badr/registration-form" 
                        class="text-sm text-indigo-800 hover:text-blue-900 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors duration-300">
                        Create Account
                    </a>
                </div>

<button 
                    type="submit" 
                    class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-indigo-800 hover:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-800 transform transition-all duration-300 hover:scale-[1.02] dark:ring-offset-gray-900"
                    onclick="handleLogin(event)"
                >
                    Login
                </button>
            </form>
        </div>
    </div>

function handleLogin(event) {
            event.preventDefault();
            
            const email = document.getElementById('email').value.trim();
            const password = document.getElementById('password').value;
            const remember = document.getElementById('remember').checked;

// Basic validation
            if (!email || !password) {
                alert('Please fill in all fields');
                return;
            }

if (!isValidEmail(email)) {
                alert('Please enter a valid email address');
                return;
            }

// Here you would typically make an API call to your backend
            console.log('Login attempt:', { email, remember });
            alert('Login successful!');
        }

function isValidEmail(email) {
            return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
        }

// Add ripple effect to button
        document.querySelector('button[type="submit"]').addEventListener('mousedown', function(e) {
            const button = e.currentTarget;
            const ripple = document.createElement('span');
            const rect = button.getBoundingClientRect();
            const size = Math.max(rect.width, rect.height);
            const x = e.clientX - rect.left - size/2;
            const y = e.clientY - rect.top - size/2;
            
            ripple.style.cssText = `
                position: absolute;
                width: ${size}px;
                height: ${size}px;
                top: ${y}px;
                left: ${x}px;
                background: rgba(255,255,255,0.3);
                border-radius: 50%;
                transform: scale(0);
                animation: ripple 0.6s linear;
                pointer-events: none;
            `;
            
            button.style.position = 'relative';
            button.style.overflow = 'hidden';
            button.appendChild(ripple);
            
            setTimeout(() => ripple.remove(), 600);
        });
    </script>

Related Examples

Responsive Contact Section Using Tailwind CSS
This HTML and Tailwind CSS snippet creates a visually appealing and responsive contact section. Designed to adapt seamlessly across different screen sizes, this component features two main areas: the contact information block and a contact form. The contact block displays essential details like phone, email, and address, alongside social media links, all encapsulated within a cyan-themed card with rounded corners and shadow effects for depth. The form area, highlighted with a contrasting white background, ensures a user-friendly interface for submitting contact details. This code snippet is perfect for integration into any modern web application requiring a responsive and stylish contact section.

Author:
Fathallah Anass

1 year ago

2.9k
Multi-Step Form with Progress Tracker
sleek and interactive multi-step registration form built with Tailwind CSS and Alpine.js, perfect for onboarding users through a smooth, step-by-step experience. This component enhances user engagement with animated transitions, real-time validation, and a dynamic progress bar that visually tracks completion. It’s fully responsive, dark-mode ready, and ideal for modern SaaS applications, startup landing pages, or authentication systems. ✨ Key Features 🪜 Three-step flow: Personal Info → Account Setup → Preferences ⚡ Real-time field validation with instant feedback 🔒 Password visibility toggles for better UX 📈 Progress bar tracker with smooth animations ✅ Success confirmation with user details preview 🌙 Dark mode support for modern UI design 💨 Alpine.js-powered interactivity – no external JS frameworks needed 📱 Fully responsive design optimized for all devices 💡 Perfect for: SaaS or startup registration flows Onboarding or sign-up pages Form builders, dashboard templates, or web app UIs UI component libraries & code snippets collections

Author:
wavy kits

3 months ago

540
Simple login form

Author:
R Thapa

2 years ago

24.9k
Login Form

Author:
UI-Templates

3 months ago

237
Login page with tailwind (SB admin 2)
This component features a split-screen design with a background image on one side and a registration form on the other.

Author:
Akshay

3 years ago

24k
simple login
simple login

Author:
Tanvir Hasan Bappy (Tanvir)

1 month ago

14
Login form #2
Login form design

Author:
QQ-VVN

8 months ago

1.2k
Travel Guru - User Login Page
A clean and responsive login page designed with TailwindCSS for the Travel Guru platform. This component provides users with a secure and simple way to sign in using their username or email and password, with additional options for remembering login credentials and password recovery. It also supports social logins via Facebook and Google for a faster authentication experience. The design focuses on a minimal and modern user interface with clear call-to-actions and seamless user flow.

Author:
SHARIFUL ISLAM

11 months ago

970
authentication form terminal
authentication form with zsh on mac terminal looks

Author:
ardianhu

1 year ago

2.9k
Animated Iogin form
This section showcases a series of interactive image cards that reveal descriptive text on hover. Built using Tailwind CSS and Astro.js, each card features a smooth animation, background blur, and opacity transition, enhancing the user experience while presenting visually engaging content.

Author:
nicoleshal07

8 months ago

565
Beautiful sign in form
form with continue with google and continue with github buttons

Author:
Anonymous

2 years ago

5.4k
Simple Login & Register Page
Login and Register Page using Tailwind, Alpine JS, and Fontawesome

Author:
Ahita Bisma Adlula

1 year ago

2.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components