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
<div class="bg-cover bg-center h-screen flex items-center"
style="background-image: url(https://images.unsplash.com/photo-1515674744565-0d7112cd179a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTZ8fHxlbnwwfHx8fHw%3D)">
<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>
</div>
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>Login Form with Background Image</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body
class="bg-[url('https://images.unsplash.com/photo-1548506923-99f6e89852fe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTR8fHxlbnwwfHx8fHw%3D')] bg-cover bg-center min-h-screen flex items-center justify-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>
</body>
</html>
This is Tailwind CSS Arbitrary values you can use to add background image.
<div class="bg-[url('/img/hero-pattern.svg')]">
<!-- ... -->
</div