Home
Jerome Soriano
Simple Login Form

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 CSS v3. It is responsive. similar terms for this example are Register, Sign in

Author Jerome Soriano

1.3k

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

Sign In page with google/facebook/twitter buttons

Author:
Orion.c

2 years ago

20.8k
Sign Up form with dark mode support

Author:
Anonymous

1 year ago

11.2k
Registration Form
Color Updates: - Changed gradient background to `from-indigo-800 to-blue-900` - Updated text colors to `text-indigo-800` and `text-indigo-900` - Changed button colors to match the new theme - Updated focus rings to use indigo colors Enhanced Styling: - Added smooth transitions with `transition-all duration-300` - Improved shadow with `shadow-2xl` - Added hover scale effect on button - Increased border radius to `rounded-xl` - Added fade-in animation for the form Improved Validation: - Added visual feedback for invalid fields - Added input event listeners to clear error states - Added trim() to username and email validation - Added form reset after successful submission Accessibility Improvements: - Maintained proper contrast ratios - Kept focus states visible - Added proper spacing for better readability - Ensured all interactive elements are properly styled Added Interactions: - Smooth hover transitions - Scale animation on button hover - Immediate feedback on input - Clear error messaging

Author:
nejaa badr

8 months ago

1.8k
Responsive eCommerce Sidebar Layout with Hamburger Menu | Tailwind CSS UI for Online Stores
Build a clean and responsive eCommerce sidebar layout with a smooth hamburger menu using Tailwind CSS and Alpine.js. Ideal for devotional, spiritual, or modern online stores. Includes dark mode support, navigation links, cart, login, and a dynamic layout for beautiful product pages.

Author:
Rajesh Pandey

2 months ago

434
NDUSTRIALCORE login
NDUSTRIALCORE

Author:
Tanvir Hasan Bappy (Tanvir)

2 months ago

139
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:
Anonymous

1 year ago

2.8k
Tailwind login page

Author:
Kofi Osei

2 years ago

10.7k
Login form #1
login form design

Author:
QQ-VVN

2 months ago

29
Login Form simple
Login form design

Author:
QQ-VVN

2 months ago

133
login form
basic login form

Author:
Ahmath S.

1 month ago

42
Login form
responsive login page design

Author:
Aman kumar

1 year ago

4k
Sign up form

Author:
Rajesh Maheshwari

4 months ago

483

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components