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

1.6k

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

Login form #2
Login form design

Author:
QQ-VVN

2 months ago

726
Full page sign-In form

Author:
Anonymous

1 year ago

3k
FacePass: Animated Image Authentication
"Where your image becomes your key" "Biometric meets beautiful animations" "A login experience that recognizes you – literally" "Security through personalized visual authentication" "Your face, animated, authenticated"

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

536
Sign-In Form with Tailwind CSS
Elegant sign in form

Author:
Carlos

10 months ago

1.3k
Input Formulario
Input used in the form Link form: https://tailwindflex.com/@ameth1208/login

Author:
Ameth Galarcio

1 year ago

1.9k
Contact us Form with Responsive

Author:
KULDEEP

3 weeks ago

122
beautifull Authentication Page
I create a Authentication page using cloude ai model.

Author:
Akram Khan

1 year ago

1.8k
Simple login page template

Author:
Freja Jensen

2 years ago

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

5 months ago

699
Sign In page with google/facebook/twitter buttons

Author:
Orion.c

2 years ago

20.9k
Login form responsive

Author:
Aman kumar

1 year ago

3.2k
Login Page Transition

Author:
Fatwa Bawahsi

3 months ago

685

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components