Home
Kofi Osei
Tailwind login page

Tailwind login page

This tailwind example is contributed by Kofi Osei, on 04-Mar-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Author Kofi Osei

10.7k

Fork Fullscreen

<div class="bg-gradient-to-br from-purple-700 to-pink-500 min-h-screen flex flex-col justify-center items-center">
    <div class="bg-white rounded-lg shadow-lg p-8 max-w-md">
        <h1 class="text-4xl font-bold text-center text-purple-700 mb-8">Welcome to My Website</h1>
        <form class="space-y-6">
            <div>
                <label class="block text-gray-700 font-bold mb-2" for="email">
                    Email
                </label>
                <input class="w-full px-4 py-2 rounded-lg border border-gray-400" id="email" name="email"
                    type="email">
            </div>
            <div>
                <label class="block text-gray-700 font-bold mb-2" for="password">
                    Password
                </label>
                <input class="w-full px-4 py-2 rounded-lg border border-gray-400" id="password" name="password"
                    type="password">
            </div>
            <div>
                <button class="w-full bg-purple-700 hover:bg-purple-900 text-white font-bold py-2 px-4 rounded-lg">
                    Log In
                </button>
            </div>
        </form>
    </div>
</div>

Related Examples

Simple Login Form
Very basic responsive login form. The form is centered within a white card with a shadow, featuring input fields for username and password. The design is clean and user-friendly.

Author:
Bunny

2 years ago

48.8k
Fullscreen login form with image backround

Author:
Noah Schmidt

2 years ago

20.1k
Login form with blured background image

Author:
Noah Schmidt

2 years ago

14.6k
User registration form with Instructions

Author:
Fagundo67

2 years ago

23.7k
Responsive registration form
form with social login buttons

Author:
Anonymous

1 year ago

26.2k
Responsive registration form
form with social login buttons

Author:
Sophia Baker

2 years ago

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

Author:
nejaa badr

7 months ago

1.5k
login page

Author:
Abid Ullah

9 months ago

1.6k
Simple Sign-In Box
It features a backdrop blur effect on a dark background, creating an elegant and modern look.

Author:
Anja Müller

1 year ago

7.4k
Full page sign-In form

Author:
Anonymous

1 year ago

2.9k
Login template

Author:
Gabriel Urbano

1 year ago

5.6k
Form
form

Author:
Aman kumar

11 months ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components