Home
Lukas Müller
Sign in form

Sign in form

simple full-height login form

This tailwind example is contributed by Lukas Müller, on 19-Feb-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Form Login Form

Author Lukas Müller

8.8k

12

Fork Fullscreen

<div class="bg-gray-100 flex h-screen items-center justify-center p-4">
    <div class="w-full max-w-md">
        <div class="bg-white shadow-md rounded-md p-8">

<img class="mx-auto h-12 w-auto" src="https://www.svgrepo.com/show/499664/user-happy.svg" alt="" />

<h2 class="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
                Sign in to your account
            </h2>

<form class="space-y-6 mt-4" action="#" method="POST">
                <div>
                    <label for="password" class="block text-sm font-medium text-gray-700">Email</label>
                    <div class="mt-1">
                        <input name="email" type="email-address" autocomplete="email-address" required
                            class="px-2 py-3 mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-sky-500 sm:text-sm" />
                    </div>
                </div>

<div>
                    <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
                    <div class="mt-1">
                        <input id="password" name="password" type="password" autocomplete="password" required
                            class="px-2 py-3 mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-sky-500 sm:text-sm" />
                    </div>
                </div>

<div>
                    <button type="submit"
                        class="flex w-full justify-center rounded-md border border-transparent bg-sky-400 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-opacity-75 focus:outline-none focus:ring-2 focus:ring-sky-400 focus:ring-offset-2">Sign
                        In
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

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.

Author:
Bunny

2 years ago

48.5k
Sign up form
simple full-height register form

Author:
Lukas Müller

2 years ago

11.8k
Sign in form

Author:
Simon Scheffer

2 years ago

15.2k
User registration form with Instructions

Author:
Fagundo67

2 years ago

23.6k
Login Form with Icon

Author:
Prashant

2 years ago

16.1k
Fullscreen login form with image backround

Author:
Noah Schmidt

2 years ago

19.9k
Login Form

Author:
Amit Pachange

2 years ago

11.9k
Responsive registration form
form with social login buttons

Author:
Sophia Baker

2 years ago

38.1k
Sign in / Login Form

Author:
Bunny

2 years ago

12.7k
Login form

Author:
Leon Bachmann

2 years ago

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

21.7k
Login form

Author:
Gopi Yadav

2 years ago

10.3k

Explore components by Tags

Didn't find component you were looking for?

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