Login

This tailwind example is contributed by Ameth Galarcio, on 05-Jul-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Register, Sign in

Form Input Login Form

Author Ameth Galarcio

Tailwind v3.4 5.2k 4

Fork Fullscreen

<div class="w-screen min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-800 px-4 sm:px-6 lg:px-8">
    <div class="relative py-3 sm:max-w-xs sm:mx-auto">
        <div class="min-h-96 px-8 py-6 mt-4 text-left bg-white dark:bg-gray-900  rounded-xl shadow-lg">
            <div class="flex flex-col justify-center items-center h-full select-none">
                <div class="flex flex-col items-center justify-center gap-2 mb-8">
                    <a href="https://amethgalarcio.web.app/" target="_blank">
                        <img src="https://amethgalarcio.web.app/assets/logo-42fde28c.svg" class="w-8" />
                    </a>
                    <p class="m-0 text-[16px] font-semibold dark:text-white">Login to your Account</p>
                    <span class="m-0 text-xs max-w-[90%] text-center text-[#8B8E98]">Get started with our app, just start section and enjoy experience.
                    </span>
                </div>
                <div class="w-full flex flex-col gap-2">
                    <label class="font-semibold text-xs text-gray-400 ">Username</label>
                    <input class="border rounded-lg px-3 py-2 mb-5 text-sm w-full outline-none dark:border-gray-500 dark:bg-gray-900" placeholder="Username" />

</div>
            </div>
            <div class="w-full flex flex-col gap-2">
                <label class="font-semibold text-xs text-gray-400 ">Password</label>
                <input type="password" class="border rounded-lg px-3 py-2 mb-5 text-sm w-full outline-none dark:border-gray-500 dark:bg-gray-900" placeholder="••••••••" />

</div>
            <div className="mt-5">
                <button class="py-1 px-8 bg-blue-500 hover:bg-blue-800 focus:ring-offset-blue-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg cursor-pointer select-none">Login</button>
            </div>
        </div>
    </div>
</div>
</div>

Related Examples

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
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
Large File upload input

Akshay

3 years ago

15.3k
Login form

Gopi Yadav

3 years ago

12k
Sign in / Login Form

Bunny

4 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.

Bunny

4 years ago

50.6k
Login Form

Amit Pachange

4 years ago

13.7k
Upload file input field

Gopi Yadav

3 years ago

15.8k
Sign In form

Amit Pachange

3 years ago

12.7k
Login form

Leon Bachmann

3 years ago

15.9k