Home
Leon Bachmann
Login form

Login form

This tailwind example is contributed by Leon Bachmann, on 12-Dec-2022. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Form Login Form

Author Leon Bachmann

12.3k

9

Fork Fullscreen

<main class="mx-auto flex min-h-screen w-full items-center justify-center bg-gray-900 text-white">
    <section class="flex w-[30rem] flex-col space-y-10">
        <div class="text-center text-4xl font-medium">Log In</div>

<div class="w-full transform border-b-2 bg-transparent text-lg duration-300 focus-within:border-indigo-500">
            <input type="text" placeholder="Email or Username" class="w-full border-none bg-transparent outline-none placeholder:italic focus:outline-none"/>
        </div>

<div class="w-full transform border-b-2 bg-transparent text-lg duration-300 focus-within:border-indigo-500">
            <input type="password" placeholder="Password" class="w-full border-none bg-transparent outline-none placeholder:italic focus:outline-none"/>
        </div>

<button class="transform rounded-sm bg-indigo-600 py-2 font-bold duration-300 hover:bg-indigo-400">LOG IN</button>

<a href="#" class="transform text-center font-semibold text-gray-500 duration-300 hover:text-gray-300">FORGOT PASSWORD?</a>

<p class="text-center text-lg">
            No account?
            <a href="#" class="font-medium text-indigo-500 underline-offset-4 hover:underline">Create One</a>
        </p>
    </section>
</main>

Related Examples

Responsive registration form
form with social login buttons

Author:
Sophia Baker

2 years ago

36.3k
Sign in form

Author:
Simon Scheffer

2 years ago

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

48k
Responsive registration form
form with social login buttons

Author:
Anonymous

1 year ago

25k
Login form
login form with sign in with Google button

Author:
gmer33

1 year ago

20.6k
User registration form with Instructions

Author:
Fagundo67

2 years ago

23.2k
Simple login form

Author:
R Thapa

1 year ago

19.8k
User registration form

Author:
Leon Bachmann

2 years ago

21.2k
Sign in / Login Form

Author:
Bunny

2 years ago

12.3k
Login Form with Icon

Author:
Prashant

2 years ago

15.7k
Simple login page template

Author:
Freja Jensen

2 years ago

11.9k
Login form

Author:
Leon Bachmann

2 years ago

13.7k
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:
Akshay

2 years ago

20.9k
Login form

Author:
Gopi Yadav

2 years ago

10.2k
Sign in form
simple full-height login form

Author:
Lukas Müller

2 years ago

8.6k
Fullscreen login form with image backround

Author:
Noah Schmidt

2 years ago

19.6k
Login template

Author:
Gabriel Urbano

1 year ago

5.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1