Simple Login Form

Username and Password inputs with Login button. Very simple. You might like it.

This tailwind example is contributed by Jerome Soriano, on 27-Sep-2024. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Register, Sign in

Author Jerome Soriano

Tailwind v3.4 2.6k 5

Fork Fullscreen

<main>
        <div class="flex items-center h-screen px-2 sm:px-0">
            <form class="bg-gray-100 w-full max-w-sm sm:max-w-xl mx-auto p-4 rounded-xl shadow-md">
                <div class="px-4 m-4 text-center">
                    <h2 class="text-xl font-bold">Login to your account</h2>
                </div>

<div class="inputs p-4 w-full">
                    <div class="grid grid-cols-1 max-w-md mx-auto">
                        <div class="form-group gap-2">
                            <label class="block my-2" for="username">Username: </label>
                            <input class="w-full border-2 rounded-md px-3 py-2 my-1 shadow-sm" type="text" id="username"
                                name="username" placeholder="Enter your username" required>
                        </div>
                        <div class="form-group">
                            <label class="block my-2" for="password">Password</label>
                            <div class="relative">
                                <input class="w-full border-2 rounded-md px-3 py-2 my-1 shadow-sm" type="password"
                                    id="password" name="password" required>
                                <button type="button"
                                    class="absolute right-2.5 top-1/2 -translate-y-1/2 text-neutral-600 dark:text-neutral-300"
                                    aria-label="Show password">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                        stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="size-5">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                                    </svg>
                                    <svg class="hidden" xmlns="http://www.w3.org/2000/svg" fill="none"
                                        viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"
                                        class="size-5">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" />
                                    </svg>
                                </button>
                            </div>

</div>
                        <button
                            class="w-full bg-blue-700 text-gray-50 rounded-md shadow-sm px-3 py-2 my-4 hover:bg-blue-600"
                            type="submit">Login</button>
                    </div>

</div>

</form>
        </div>
    </main>

Related Examples

Forgot Password Screen

JUGENDRA GANGWAR

1 month ago

46
Login form
login form with sign in with Google button

gmer33

3 years ago

24.6k
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. 😊🎨

AyDin VM

2 years ago

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

1 month ago

15
Forgot password?
you can change password an time

gidy

1 year ago

1.1k
Responsive Registration Page
I created a responsive and visually appealing registration page using TailwindCSS and HTML5. This page features a gradient background, a modern card-style form, and clear input fields for username, email, password, and password confirmation. It includes client-side validation with real-time error messages to ensure all required fields are filled correctly and passwords match. This form is designed to provide a seamless user experience across all devices.

zobaidul kaziex

2 years ago

3.8k
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

Anonymous

1 year ago

868
Responsive Login & Support Form
A responsive login page for an order and production management system. It features a branded navigation bar, username and password fields, a clear sign-in action, and a built-in support message form with attachment and emoji controls. Built with Tailwind CSS and Flowbite, the layout adapts smoothly to desktop and mobile screens. Tags: Login Form, Authentication, Contact Form, Support Form, Responsive, Navbar, Footer, Tailwind CSS, Flowbite, Admin Panel

Alla Telegina

2 months ago

166
Loginpage

Ramesh Kumar Sah

1 year ago

1.1k
Login

Amine Ghanim

1 year ago

2k
MULTI-STEP FORM component
MULTI-STEP FORM WIZARD · Open Source Component Steps: Personal → Role → Preferences → Goals → Review Features: stepper, validation, conditional fields, localStorage, animated transitions, review summary

Ijila Itunu

6 months ago

479
Sign In page with google/facebook/twitter buttons
sanjay

Sanjay Kumar

9 months ago

756