In this section we will create simple floating label form using Tailwind CSS 3.
How to install & setup Tailwind CSS v3
1. Create simple floating lable form.
<div class="relative">
<input type="name" id="name"
class="w-full h-16 p-3 pt-4 placeholder-transparent border border-gray-200 rounded-md peer focus:outline-none focus:border-gray-500 focus:shadow-sm"
placeholder="Name" autocomplete="off" />
<label for="name"
class="absolute top-0 left-0 h-full px-3 py-5 text-sm transition-all duration-100 ease-in-out origin-left transform scale-75 translate-x-1 -translate-y-3 opacity-75 pointer-events-none peer-placeholder-shown:opacity-100 peer-focus:opacity-75 peer-placeholder-shown:scale-100 peer-focus:scale-75 peer-placeholder-shown:translate-y-0 peer-focus:-translate-y-3 peer-placeholder-shown:translate-x-0 peer-focus:translate-x-1">Name</label>
</div>
2.Single border floating lable form.
<div class="relative">
<input id="name" name="name" type="text"
class="w-full h-10 text-gray-900 placeholder-transparent border-b-2 border-gray-300 peer focus:outline-none focus:border-purple-600"
placeholder="Name" />
<label for="name"
class="absolute left-0 -top-3.5 text-gray-600 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 peer-focus:-top-3.5 peer-focus:text-gray-600 peer-focus:text-sm">Name
</label>
</div>
tailwind css border floating lable
3. Tailwind CSS Login Page floating lable
<!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>Create Simple Floating Label Login Page</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="relative flex flex-col justify-center min-h-screen overflow-hidden">
<div
class="w-full p-6 m-auto bg-white rounded-md shadow-md border-top lg:max-w-md">
<h1 class="text-3xl font-semibold text-center text-purple-700">Floating Label</h1>
<form class="mt-6">
<div class="relative mb-8">
<input id="email" name="email" type="text"
class="w-full h-10 text-gray-900 placeholder-transparent border-b-2 border-gray-300 peer focus:outline-none focus:border-purple-600"
placeholder="[email protected]" />
<label for="email"
class="absolute left-0 -top-3.5 text-gray-600 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 peer-focus:-top-3.5 peer-focus:text-gray-600 peer-focus:text-sm">Email
address</label>
</div>
<div class="relative mb-4">
<input id="password" name="password" type="password"
class="w-full h-10 text-gray-900 placeholder-transparent border-b-2 border-gray-300 peer focus:outline-none focus:border-purple-600"
placeholder="[email protected]" />
<label for="Password"
class="absolute left-0 -top-3.5 text-gray-600 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 peer-focus:-top-3.5 peer-focus:text-gray-600 peer-focus:text-sm">
Password</label>
</div>
<a href="#" class="text-xs text-gray-600 hover:underline">Forget Password?</a>
<div class="mt-6">
<button
class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-purple-700 rounded-md hover:bg-purple-600 focus:outline-none focus:bg-purple-600">
Login
</button>
</div>
</form>
<p class="mt-8 text-xs font-light text-center text-gray-700"> Don't have an account? <a href="#"
class="font-medium text-purple-600 hover:underline">Sign up</a></p>
</div>
</body>
</html>
tailwind login page with floating lable
Read Also
Tailwind CSS 3 FAQ Accordion UI Example
Tailwind CSS 3 Alert Message Example
Tailwind CSS 3 Avatars Example
Tailwind CSS 3 Breadcrumb Example
Tailwind CSS v3 Button Examples
Tailwind CSS Gradient Button Example
Tailwind CSS 3D Button Example
Tailwind CSS Loading Button Example
Tailwind CSS v3 Cards Examples
Tailwind CSS Checkbox Form Examples
Tailwind CSS Dropdowns (Menu) on Hover Example
Tailwind CSS Multiselect Dropdown Example
How to use dark mode toggle switch in Tailwind CSS 3
How to use @apply directive in Tailwind CSS
Tailwind CSS sticky header & fixed navbar example
Tailwind CSS Navbar UI Example
Tailwind CSS 3 Login Page UI Example
Tailwind CSS Login Modal Example
Tailwind CSS 3 Overlay Image Example
Tailwind CSS Thank You Page Example
Tailwind CSS Timeline UI Example
