In this tutorial, we will see how to create a login page in Tailwind CSS with DaisyUI. We’ll cover examples of DaisyUI login forms and sign-in forms using Tailwind CSS and DaisyUI.
Tailwind DaisyUI Registration Form Example
Example 1
Tailwind CSS login form with DaisyUI.
Tailwind CSS & DaisyUI
<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>
Example 2
Tailwind CSS responsive login form with DaisyUI.
Tailwind CSS & DaisyUI
<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-neutral btn btn-block">Login</button>
</div>
</form>
</div>
</div>
Example 3
DaisyUI sign-in page with Tailwind CSS border styles.
HTML
<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 btn-neutral">Login</button>
</div>
</form>
</div>
</div>
