Login form

This tailwind example is contributed by Gopi Yadav, on 10-Oct-2022. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Register, Sign in

Form Input Login Form

Author Gopi Yadav

Tailwind v3.4 12k 8

Fork Fullscreen

<main class="container mx-auto p-4 mt-12 bg-white flex flex-col items-center justify-center text-gray-700">
    <div class="w-10/12 sm:w-8/12 md:w-6/12 lg:w-5/12 xl:w-4/12 mb-4">
        <h1 class="text-4xl font-semibold">Welcome back.</h1>
    </div>
    <div class="w-10/12 sm:w-8/12 md:w-6/12 lg:w-5/12 xl:w-4/12 mb-6">
        <input class="mb-4 p-2 appearance-none block w-full bg-gray-200 placeholder-gray-900 rounded border focus:border-teal-500" type="text" placeholder="Email"/>
        <input class="mb-4 p-2 appearance-none block w-full bg-gray-200 placeholder-gray-900 rounded border focus:border-teal-500" type="text" placeholder="Password"/>
        <div class="flex items-center">
            <div class="w-1/2 flex items-center">
                <input id="remember-me" type="checkbox" class="mt-1 mr-2" />
                <label for="remember-me">Remember me!</label>
            </div>
            <button class="ml-auto w-1/2 bg-gray-800 text-white p-2 rounded font-semibold hover:bg-gray-900" type="submit">Log In</button>
        </div>
    </div>
</main>

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
Responsive registration form
form with social login buttons

Sophia Baker

3 years ago

46.7k
Sign in / Login Form

Bunny

4 years ago

14.6k
User registration form with Instructions

Fagundo67

3 years ago

25.2k
Login form

Leon Bachmann

3 years ago

14k
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.

Akshay

4 years ago

24.8k
Profile Form
Profile form for taking user inputs

TailwindFlex

4 years ago

15.4k
Tailwind CSS Radio Button Cards

Prashant

4 years ago

13.1k
Login Form with Icon

Prashant

4 years ago

18.9k
Large File upload input

Akshay

4 years ago

15.3k
Login Form

Amit Pachange

4 years ago

13.7k
Upload file input field

Gopi Yadav

3 years ago

15.8k