In this tutorial, we'll be building a login form page with a background image using Tailwind CSS. You can incorporate a background image in Tailwind CSS using inline CSS and take advantage of Tailwind CSS Arbitrary values. Let's see how to do this.
Tailwind CSS Login Form with Background Image using Inline CSS
<body class="bg-cover bg-center h-screen flex items-center"
style="background-image: url(https://source.unsplash.com/featured/?background)">
<div class="container mx-auto p-4">
<div class="bg-white p-8 rounded shadow-md max-w-md mx-auto">
<h2 class="text-2xl font-bold mb-6">Login</h2>
<form>
<div class="mb-4">
<label for="username" class="block text-gray-700 text-sm font-bold mb-2">Username:</label>
<input type="text" id="username" name="username" class="w-full p-2 border rounded">
</div>
<div class="mb-4">
<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 p-2 border rounded">
</div>
<div class="flex items-center mb-4">
<input type="checkbox" id="remember" name="remember" class="mr-2">
<label for="remember" class="text-gray-600">Remember me</label>
</div>
<div class="mb-4">
<a href="#" class="text-blue-500 text-sm">Forgot password?</a>
</div>
<button type="submit" class="bg-blue-500 text-white p-2 rounded w-full">Login</button>
</form>
<div class="mt-4 text-center">
<p class="text-gray-600">Don't have an account? <a href="#" class="text-blue-500">Sign up</a></p>
</div>
</div>
</div>
</body>
login form with background image
Tailwind CSS Login Form with Background Image using Tailwind CSS Arbitrary values
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Login Form with Background Image</title>
<script src="https://cdn.tailwindcss.com/"></script>
</head>
<body>
<div
class="bg-[url("https://source.unsplash.com/featured/?background")] flex items-center justify-center min-h-screen bg-gray-100 bg-no-repeat bg-center">
<div
class="w-full max-w-md p-8 space-y-6 rounded-xl bg-white bg-opacity-90 backdrop-filter backdrop-blur-lg shadow-md">
<h1 class="text-2xl font-bold text-center">LOGO</h1>
<form class="space-y-6" action="#" method="POST">
<div>
<label for="email" class="text-sm font-semibold">Email</label>
<input type="email" id="email" placeholder="Email" required
class="w-full p-2 mt-1 border rounded-md focus:border-purple-400 focus:outline-none focus:ring focus:ring-purple-300" />
</div>
<div>
<label for="password" class="text-sm font-semibold">Password</label>
<input type="password" id="password" placeholder="Password" required
class="w-full p-2 mt-1 border rounded-md focus:border-purple-400 focus:outline-none focus:ring focus:ring-purple-300" />
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember_me" type="checkbox"
class="w-4 h-4 border-gray-300 rounded focus:ring-purple-500" />
<label for="remember_me" class="ml-2 text-sm">Remember me</label>
</div>
<a href="#" class="text-sm text-purple-600 hover:underline">Forgot password?</a>
</div>
<button type="submit"
class="w-full py-2 text-white bg-purple-600 rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">
Sign in
</button>
</form>
</div>
</div>
</body>
</html>
sign in form with background image
This is Tailwind CSS Arbitrary values you can use to add background image.
<div class="bg-[url('/img/hero-pattern.svg')]">
<!-- ... -->
</div
