Home
Kofi Osei
Tailwind login page

Tailwind login page

This tailwind example is contributed by Kofi Osei, on 04-Mar-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Author Kofi Osei

10.7k

Fork Fullscreen

<div class="bg-gradient-to-br from-purple-700 to-pink-500 min-h-screen flex flex-col justify-center items-center">
    <div class="bg-white rounded-lg shadow-lg p-8 max-w-md">
        <h1 class="text-4xl font-bold text-center text-purple-700 mb-8">Welcome to My Website</h1>
        <form class="space-y-6">
            <div>
                <label class="block text-gray-700 font-bold mb-2" for="email">
                    Email
                </label>
                <input class="w-full px-4 py-2 rounded-lg border border-gray-400" id="email" name="email"
                    type="email">
            </div>
            <div>
                <label class="block text-gray-700 font-bold mb-2" for="password">
                    Password
                </label>
                <input class="w-full px-4 py-2 rounded-lg border border-gray-400" id="password" name="password"
                    type="password">
            </div>
            <div>
                <button class="w-full bg-purple-700 hover:bg-purple-900 text-white font-bold py-2 px-4 rounded-lg">
                    Log In
                </button>
            </div>
        </form>
    </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

3 years ago

49.2k
Fullscreen login form with image backround

Author:
Noah Schmidt

2 years ago

20.5k
Login form with blured background image

Author:
Noah Schmidt

2 years ago

14.9k
User registration form with Instructions

Author:
Fagundo67

2 years ago

24.1k
Responsive registration form
form with social login buttons

Author:
Anonymous

2 years ago

27.4k
Responsive registration form
form with social login buttons

Author:
Sophia Baker

2 years ago

41.2k
Beautiful sign in form
form with continue with google and continue with github buttons

Author:
Anonymous

1 year ago

4.7k
Responsive eCommerce Sidebar Layout with Hamburger Menu | Tailwind CSS UI for Online Stores
Build a clean and responsive eCommerce sidebar layout with a smooth hamburger menu using Tailwind CSS and Alpine.js. Ideal for devotional, spiritual, or modern online stores. Includes dark mode support, navigation links, cart, login, and a dynamic layout for beautiful product pages.

Author:
Rajesh Pandey

3 months ago

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

Author:
Anja Müller

1 year ago

7.6k
Amazing 3D Login and Registiration Aniamation Form
create a stunning 3D animated background with floating geometric shapes, particle effects, and interactive elements using React, Three.js, and Tailwind CSS. This will be fully responsive and visually captivating.

Author:
Nicole Shalom

3 months ago

533
Travel Guru - User Login Page
A clean and responsive login page designed with TailwindCSS for the Travel Guru platform. This component provides users with a secure and simple way to sign in using their username or email and password, with additional options for remembering login credentials and password recovery. It also supports social logins via Facebook and Google for a faster authentication experience. The design focuses on a minimal and modern user interface with clear call-to-actions and seamless user flow.

Author:
SHARIFUL ISLAM

6 months ago

725
Sign in form

Author:
Simon Scheffer

2 years ago

15.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components