Make a simple and stylish login form easily with Tailwind CSS. This example shows how to use Tailwind’s classes to create a clean and responsive login form that looks great on any device.
Simple Login Form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Login Form</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">
<div class="bg-white p-8 rounded-lg shadow-md w-96">
<h2 class="text-2xl font-semibold mb-6 text-center">Login</h2>
<form>
<div class="mb-4">
<label for="email" class="block text-gray-700 text-sm font-bold mb-2">Email</label>
<input type="email" id="email" name="email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300" placeholder="[email protected]" required>
</div>
<div class="mb-6">
<label for="password" class="block text-gray-700 text-sm font-bold mb-2">Password</label>
<input type="password" id="password" name="password" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300" placeholder="••••••••" required>
</div>
<div class="flex items-center justify-between mb-6">
<div class="flex items-center">
<input type="checkbox" id="remember" name="remember" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
<label for="remember" class="ml-2 block text-sm text-gray-900">Remember me</label>
</div>
<a href="#" class="text-sm text-indigo-600 hover:text-indigo-500">Forgot password?</a>
</div>
<div>
<button type="submit" class="w-full bg-indigo-600 text-white rounded-md py-2 px-4 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50">Sign In</button>
</div>
</form>
</div>
</body>
</html>
Modern Login Form with Icon
<body class="bg-gradient-to-r from-blue-500 to-indigo-600 flex items-center justify-center min-h-screen">
<div class="w-full max-w-md p-8 bg-white rounded-lg shadow-lg">
<div class="flex items-center justify-center mb-6">
<svg class="w-16 h-16 text-blue-500" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2a10 10 0 00-10 10 10 10 0 0010 10 10 10 0 0010-10A10 10 0 0012 2zM4 12a8 8 0 1116 0A8 8 0 014 12zm8-5a5 5 0 00-5 5 5 5 0 0010 0 5 5 0 00-5-5zm0 8a3 3 0 01-3-3h6a3 3 0 01-3 3z"/>
</svg>
</div>
<h2 class="text-2xl font-bold text-gray-800 text-center">Login</h2>
<form action="#" method="POST" class="space-y-4">
<div>
<label for="email" class="block text-sm font-medium text-gray-700">Email</label>
<input type="email" id="email" name="email" required
class="w-full px-3 py-2 mt-1 text-gray-700 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700">Password</label>
<input type="password" id="password" name="password" required
class="w-full px-3 py-2 mt-1 text-gray-700 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<button type="submit"
class="w-full px-4 py-2 text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
Sign In
</button>
</form>
<p class="mt-4 text-sm text-center text-gray-600">Don't have an account? <a href="#" class="text-blue-600 hover:underline">Sign up</a></p>
</div>
</body>
