Home
Shariar Hasan
Simple Login Page

Simple Login Page

This component is responsive for Mobile & Desktop & Dark mode Supported.

This tailwind example is contributed by Shariar Hasan, on 24-Feb-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Register, Sign in

Author Shariar Hasan

3.2k

Fork Fullscreen

<div class="min-h-screen flex items-center justify-center w-full dark:bg-gray-950">
	<div class="bg-white dark:bg-gray-900 shadow-md rounded-lg px-8 py-6 max-w-md">
		<h1 class="text-2xl font-bold text-center mb-4 dark:text-gray-200">Welcome Back!</h1>
		<form action="#">
			<div class="mb-4">
				<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
				<input type="email" id="email" class="shadow-sm rounded-md w-full px-3 py-2 border border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="your@email.com" required>
			</div>
			<div class="mb-4">
				<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Password</label>
				<input type="password" id="password" class="shadow-sm rounded-md w-full px-3 py-2 border border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Enter your password" required>
				<a href="#"
					class="text-xs text-gray-600 hover:text-indigo-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Forgot
					Password?</a>
			</div>
			<div class="flex items-center justify-between mb-4">
				<div class="flex items-center">
					<input type="checkbox" id="remember" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 focus:outline-none" checked>
					<label for="remember" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">Remember me</label>
				</div>
				<a href="#"
					class="text-xs text-indigo-500 hover:text-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Create
					Account</a>
			</div>
			<button onclick="alert("hello")" type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Login</button>
		</form>
	</div>
</div>

Related Examples

Login form with social login buttons

Author:
Task Master

2 years ago

19.5k
Login Template
its is a basic login template

Author:
Sergio Gonzalez

5 months ago

345
Login Form - Agendamiento

Author:
Jhonatan Llamuca

10 months ago

1.3k
Sign In Form
Clean and modern Sign In form with email, password, and "Forgot password" link. Fully responsive and styled with Tailwind CSS, perfect for SaaS platforms.

Author:
Lekhraj Ghimire

5 months ago

551
Login Form with Icon

Author:
Akai

2 months ago

142
Contact us Form with Responsive

Author:
KULDEEP

4 months ago

370
Facebook Login page
Facebook Login page

Author:
Rehman Arshad

1 year ago

2.9k
Complete Profile Form with Avatar Upload & Social Links
A fully responsive profile setup form built with Tailwind CSS and Alpine.js. Users can upload a profile picture, fill in personal and professional details, add social links, and receive real-time validation feedback. Includes a smooth success message animation after submission, with optional navigation to the profile or dashboard. Perfect for onboarding flows or user account management interfaces.

Author:
wavy kits

1 month ago

105
Login

Author:
Amine Ghanim

7 months ago

519
Login form

Author:
Aman kumar

1 year ago

4.4k
Registration form

Author:
Juan D. Cortorreal

1 day ago

4
Login screen
Reward login screen

Author:
ehmasuk

2 months ago

166

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components