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

13.4k

10

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

3 years ago

44.4k
Sign in form

Author:
Simon Scheffer

3 years ago

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

3 years ago

50k
Responsive registration form
form with social login buttons

Author:
Anonymous

2 years ago

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

Author:
gmer33

2 years ago

23.6k
User registration form with Instructions

Author:
Fagundo67

3 years ago

24.6k
Simple login form

Author:
R Thapa

2 years ago

24.9k
User registration form

Author:
Leon Bachmann

3 years ago

25.1k
Sign in / Login Form

Author:
Bunny

3 years ago

13.7k
Login Form with Icon

Author:
Prashant

3 years ago

18k
Simple login page template

Author:
Freja Jensen

3 years ago

12.6k
Login form

Author:
Leon Bachmann

3 years ago

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

3 years ago

24k
Login form

Author:
Gopi Yadav

3 years ago

11.5k
Sign in form
simple full-height login form

Author:
Lukas Müller

2 years ago

9.6k
Fullscreen login form with image backround

Author:
Noah Schmidt

2 years ago

21.1k
Login template

Author:
Gabriel Urbano

2 years ago

6.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ 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

© 2026 TailwindFlex. All Rights Reserved.

v1.12