In this tutorial we will see login page in tailwind css with DaisyUI. We will see daisyui login form, sign in form examples with Tailwind CSS & DaisyUI
How to install & setup Tailwind CSS v3
Tool Use
Tailwind CSS
DaisyUI
First you need to setup tailwind css with DaisyUI. You can install manually or you read below blog.
How to Install DaisyUI in Tailwind CSS
Example 1
tailwind css with daisyui login form.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DaisyUI Login Form Example</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="relative flex flex-col justify-center h-screen overflow-hidden">
<div class="w-full p-6 m-auto bg-white rounded-md shadow-md lg:max-w-lg">
<h1 class="text-3xl font-semibold text-center text-purple-700">DaisyUI</h1>
<form class="space-y-4">
<div>
<label class="label">
<span class="text-base label-text">Email</span>
</label>
<input type="text" placeholder="Email Address" class="w-full input input-bordered input-primary" />
</div>
<div>
<label class="label">
<span class="text-base label-text">Password</span>
</label>
<input type="password" placeholder="Enter Password"
class="w-full input input-bordered input-primary" />
</div>
<a href="#" class="text-xs text-gray-600 hover:underline hover:text-blue-600">Forget Password?</a>
<div>
<button class="btn btn-primary">Login</button>
</div>
</form>
</div>
</div>
</body>
</html>
tailwind css with daisyui responsive sign in
Example 2
tailwind daisyui responsive login form.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DaisyUI Login Form Example</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="relative flex flex-col justify-center h-screen overflow-hidden">
<div class="w-full p-6 m-auto bg-white rounded-md shadow-md ring-2 ring-gray-800/50 lg:max-w-lg">
<h1 class="text-3xl font-semibold text-center text-gray-700">DaisyUI</h1>
<form class="space-y-4">
<div>
<label class="label">
<span class="text-base label-text">Email</span>
</label>
<input type="text" placeholder="Email Address" class="w-full input input-bordered" />
</div>
<div>
<label class="label">
<span class="text-base label-text">Password</span>
</label>
<input type="password" placeholder="Enter Password"
class="w-full input input-bordered" />
</div>
<a href="#" class="text-xs text-gray-600 hover:underline hover:text-blue-600">Forget Password?</a>
<div>
<button class="btn btn-block">Login</button>
</div>
</form>
</div>
</div>
</body>
</html>
daisyui login page
Example 3
tailwind daisyui border style sign in page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DaisyUI Login Form Example</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="relative flex flex-col items-center justify-center h-screen overflow-hidden">
<div class="w-full p-6 bg-white border-t-4 border-gray-600 rounded-md shadow-md border-top lg:max-w-lg">
<h1 class="text-3xl font-semibold text-center text-gray-700">DaisyUI</h1>
<form class="space-y-4">
<div>
<label class="label">
<span class="text-base label-text">Email</span>
</label>
<input type="text" placeholder="Email Address" class="w-full input input-bordered" />
</div>
<div>
<label class="label">
<span class="text-base label-text">Password</span>
</label>
<input type="password" placeholder="Enter Password"
class="w-full input input-bordered" />
</div>
<a href="#" class="text-xs text-gray-600 hover:underline hover:text-blue-600">Forget Password?</a>
<div>
<button class="btn btn-block">Login</button>
</div>
</form>
</div>
</div>
</body>
</html>
daisyui border style sign in page
