Sign in form

This tailwind example is contributed by Simon Scheffer, on 01-Feb-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Register, Sign in

Form Login Form

Author Simon Scheffer

Tailwind v3.4 17k 16

Fork Fullscreen

<div
    class="relative mx-auto w-full max-w-md bg-white px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:rounded-xl sm:px-10">
    <div class="w-full">
        <div class="text-center">
            <h1 class="text-3xl font-semibold text-gray-900">Sign in</h1>
            <p class="mt-2 text-gray-500">Sign in below to access your account</p>
        </div>
        <div class="mt-5">
            <form action="">
                <div class="relative mt-6">
                    <input type="email" name="email" id="email" placeholder="Email Address" class="peer mt-1 w-full border-b-2 border-gray-300 px-0 py-1 placeholder:text-transparent focus:border-gray-500 focus:outline-none" autocomplete="NA" />
                    <label for="email" class="pointer-events-none absolute top-0 left-0 origin-left -translate-y-1/2 transform text-sm text-gray-800 opacity-75 transition-all duration-100 ease-in-out peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-focus:top-0 peer-focus:pl-0 peer-focus:text-sm peer-focus:text-gray-800">Email Address</label>
                </div>
                <div class="relative mt-6">
                    <input type="password" name="password" id="password" placeholder="Password" class="peer peer mt-1 w-full border-b-2 border-gray-300 px-0 py-1 placeholder:text-transparent focus:border-gray-500 focus:outline-none" />
                    <label for="password" class="pointer-events-none absolute top-0 left-0 origin-left -translate-y-1/2 transform text-sm text-gray-800 opacity-75 transition-all duration-100 ease-in-out peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-focus:top-0 peer-focus:pl-0 peer-focus:text-sm peer-focus:text-gray-800">Password</label>
                </div>
                <div class="my-6">
                    <button type="submit" class="w-full rounded-md bg-black px-3 py-4 text-white focus:bg-gray-600 focus:outline-none">Sign in</button>
                </div>
                <p class="text-center text-sm text-gray-500">Don&#x27;t have an account yet?
                    <a href="#!"
                        class="font-semibold text-gray-600 hover:underline focus:text-gray-800 focus:outline-none">Sign
                        up
                    </a>.
                </p>
            </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.

Bunny

4 years ago

50.6k
Simple login form

R Thapa

2 years ago

27k
Login form

Leon Bachmann

3 years ago

14k
Responsive registration form
form with social login buttons

Sophia Baker

3 years ago

46.7k
User registration form with Instructions

Fagundo67

3 years ago

25.2k
Fullscreen login form with image backround

Noah Schmidt

3 years ago

21.9k
Login form with social login buttons

Task Master

3 years ago

20.4k
Sign in / Login Form

Bunny

4 years ago

14.5k
Login Form with Icon

Prashant

4 years ago

18.8k
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
Simple login page template

Freja Jensen

3 years ago

13.3k
User registration form

Leon Bachmann

3 years ago

25.8k
Sign in form
simple full-height login form

Lukas Müller

3 years ago

10.5k
Login form

Leon Bachmann

3 years ago

15.9k
Forgot password form
Useful form for sending password reset link

Steven Kuhn

4 years ago

22.1k
Sign Up form with dark mode support

Anonymous

2 years ago

12.8k
Simple Sign-up Box
It features a backdrop blur effect on a dark background, creating an elegant and modern look.

Anja Müller

2 years ago

11.3k
Responsive registration form
form with social login buttons

Anonymous

3 years ago

30.5k