In today’s web development landscape, creating attractive and functional user interfaces efficiently is crucial. Two powerful tools that can help achieve this are Tailwind CSS and DaisyUI. In this blog post, we’ll explore how to create two types of login forms: a simple, clean design and a more visually appealing version with an integrated image. Both will be responsive and modern, showcasing the capabilities of Tailwind CSS and DaisyUI.
The Power of Tailwind CSS and DaisyUI
Tailwind CSS is a utility-first CSS framework that allows developers to rapidly build custom user interfaces. Instead of predefined components, Tailwind provides low-level utility classes that you can combine to create any design, directly in your markup.
DaisyUI, built on top of Tailwind CSS, offers a set of pre-designed components and additional utility classes. It extends Tailwind’s capabilities, making it even easier to create beautiful, consistent designs without leaving your HTML.
Creating a Simple, Clean Login Form
Let’s start with a straightforward login form that includes all the essential elements:
- Email input field
- Password input field
- “Forgot password?” link
- Login button
- Sign-up option
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-base-200 flex items-center justify-center min-h-screen">
<div class="card w-96 bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title text-2xl font-bold mb-6">Login</h2>
<form>
<div class="form-control">
<label class="label">
<span class="label-text">Email</span>
</label>
<label class="input input-bordered flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4 opacity-70"><path d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" /><path d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" /></svg>
<input type="email" class="grow" placeholder="[email protected]" />
</label>
</div>
<div class="form-control mt-4">
<label class="label">
<span class="label-text">Password</span>
</label>
<label class="input input-bordered flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4 opacity-70"><path fill-rule="evenodd" d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z" clip-rule="evenodd" /></svg>
<input type="password" class="grow" placeholder="Enter password" />
</label>
<label class="label">
<a href="#" class="label-text-alt link link-hover">Forgot password?</a>
</label>
</div>
<div class="form-control mt-6">
<button class="btn btn-primary">
Login
</button>
</div>
</form>
<div class="divider">OR</div>
<div class="text-center">
<p>Don't have an account?</p>
<a href="#" class="link link-primary">Sign up now</a>
</div>
</div>
</div>
</body>
</html>
Login Form with an Image
For a more visually striking design, we can incorporate an image alongside our login form. This not only adds visual interest but also provides an opportunity to reinforce branding or set a mood for the login experience. Here’s how we can modify our login form to include an image:
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Login Form with Image</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-base-200 min-h-screen flex items-center justify-center">
<div class="card lg:card-side bg-base-100 shadow-xl max-w-4xl w-full">
<figure class="lg:w-1/2">
<img src="https://picsum.photos/seed/login/800/600" alt="Random image" class="object-cover w-full h-full" />
</figure>
<div class="card-body lg:w-1/2">
<h2 class="card-title text-2xl font-bold mb-6">Login</h2>
<form>
<div class="form-control">
<label class="label">
<span class="label-text">Email</span>
</label>
<label class="input input-bordered flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4 opacity-70"><path d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" /><path d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" /></svg>
<input type="email" class="grow" placeholder="[email protected]" />
</label>
</div>
<div class="form-control mt-4">
<label class="label">
<span class="label-text">Password</span>
</label>
<label class="input input-bordered flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4 opacity-70"><path fill-rule="evenodd" d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z" clip-rule="evenodd" /></svg>
<input type="password" class="grow" placeholder="Enter password" />
</label>
<label class="label">
<a href="#" class="label-text-alt link link-hover">Forgot password?</a>
</label>
</div>
<div class="form-control mt-6">
<button class="btn btn-primary">Login</button>
</div>
</form>
<div class="divider">OR</div>
<div class="text-center">
<p>Don't have an account?</p>
<a href="#" class="link link-primary">Sign up now</a>
</div>
</div>
</div>
</body>
</html>
The key changes here are:
1. We’ve added the lg:card-side class to create a side-by-side layout on larger screens.
2. The figure element contains our image, using Lorem Picsum as a placeholder.
3. We use lg:w-1/2 to give both the image and form equal width on large screens.
4. The object-cover class ensures the image fills its container without distortion.
Making It Responsive
One of the great advantages of using Tailwind CSS is the ease with which we can make our designs responsive. In our image-enhanced login form, we’ve used the `lg:` prefix on several classes. This means these styles only apply on larger screens (1024px and up, by default). On smaller screens, the layout naturally stacks vertically, with the image appearing above the form. This creates a seamless experience across devices without any additional media queries.
Conclusion
Tailwind CSS and DaisyUI provide a powerful combination for creating modern, responsive login forms. Whether you prefer a simple, clean design or want to incorporate visual elements like images, these tools offer the flexibility and ease of use to bring your vision to life. By leveraging utility classes and pre-built components, you can rapidly prototype and refine your designs,