Tailwind login page

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

Author Kofi Osei

Tailwind v3.4 11.2k 10

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.

Bunny

4 years ago

50.6k
Fullscreen login form with image backround

Noah Schmidt

3 years ago

22k
Login form with blured background image

Noah Schmidt

3 years ago

16.2k
User registration form with Instructions

Fagundo67

3 years ago

25.2k
Responsive registration form
form with social login buttons

Anonymous

3 years ago

30.6k
Responsive registration form
form with social login buttons

Sophia Baker

3 years ago

46.8k
login
html , css

Hacker Development

1 year ago

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

Anja Müller

3 years ago

11.3k
Modern Login Page
Dive into a world of cool animations and captivating visuals. This beautifully crafted interface is not only eye-catching but also highly functional. You can use it as-is or customize it to make it your own. Share your ideas, and let’s create something extraordinary together!” Feel free to tweak it further or add any specific details you’d like. 😊🎨

Anonymous

2 years ago

3.7k
Search input asasasas
sasasasasas

Notify ahmedabad

2 years ago

1.8k
Full page login page

Anonymous

1 year ago

3.3k
Login Page
A responsive minimal login page built with pure HTML and Tailwind CSS. Includes social authentication buttons, email & password fields, remember me option, and a clean centered card design that's easy to integrate into SaaS and web applications.

JUGENDRA GANGWAR

2 weeks ago

8