Login form with blured background image

This tailwind example is contributed by Noah Schmidt, on 20-Jan-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Register, Sign in

Author Noah Schmidt

Tailwind v3.4 16.2k 12

Fork Fullscreen

<div class="relative z-10 bg-white p-8 rounded-md shadow-lg">
        <h1 class="text-xl font-bold mb-4">Login</h1>
        <form action="#" method="POST">
            <div class="mb-4">
                <label class="block text-gray-700 font-bold mb-2" for="email">Email</label>
                <input
                    class="appearance-none border rounded-md py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline w-full"
                    id="email" type="email" placeholder="Email">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 font-bold mb-2" for="password">Password</label>
                <input
                    class="appearance-none border rounded-md py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline w-full"
                    id="password" type="password" placeholder="Password">
            </div>
            <div class="flex items-center justify-between gap-8">
                <button
                    class="bg-cyan-500 hover:bg-cyan-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                    type="button">
                    Sign In
                </button>
                <a class="inline-block align-baseline font-bold text-sm text-cyan-500 hover:text-cyan-800"
                    href="#">
                    Forgot Password?
                </a>
            </div>
        </form>
    </div>
</div>

Related Examples

Fullscreen login form with image backround

Noah Schmidt

3 years ago

22k
Simple login form

R Thapa

3 years ago

27.1k
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.7k
Responsive registration form
form with social login buttons

Sophia Baker

3 years ago

46.9k
Tailwind login page

Kofi Osei

3 years ago

11.2k
Responsive registration form
form with social login buttons

Anonymous

3 years ago

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

Akshay

4 years ago

24.9k
Simple login page template

Freja Jensen

3 years ago

13.3k
Responsive login form with image

Lukas Müller

3 years ago

16.6k
Simple registration form
Registration

Jerome Soriano

8 months ago

750
Responsive Form
This modern, fully responsive account creation form is designed using HTML and Tailwind CSS, ensuring a clean, professional, and accessible user experience. It features a card-based layout with smooth spacing, a subtle shadow effect, and a structured grid system for optimal responsiveness across all devices.

Rajesh Maheshwari

1 year ago

1.8k
simple login
simple login

Tanvir Hasan Bappy (Tanvir)

10 months ago

372