A floating window, a "popup window" or "overlay window, " is a UI element that appears on top of a web. It temporarily interrupts the user's interaction with the underlying content to display important messages and information.
To create a floating label using Tailwind CSS, you can utilize Tailwind's utility classes to achieve a smooth and responsive design.
Approach
- Set up the basic HTML structure with <!DOCTYPE html>, head, and body elements.
- Include necessary meta tags and external stylesheets in the head section.
- Use Tailwind CSS utility classes for styling to achieve a clean and visually appealing design.
- Create a responsive grid layout with rows and columns for the portfolio items.
- Implement media queries to adjust the layout for different screen sizes.
- Display portfolio items with images, titles, and descriptions in the grid.
- Ensure images are responsive and use alternative text for accessibility.
Example: A simple and modern sign-in form with floating labels, built using Tailwind CSS, featuring email and password input fields with a submit button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Sign In Form with Floating Labels</title>
<script src="https://cdn.tailwindcss.com/3.4.16"></script>
</head>
<body class="flex items-center
justify-center min-h-screen
bg-gray-100">
<div class="w-full
max-w-md mx-auto
bg-white p-6
rounded-md shadow-md">
<div class="text-center">
<h1 class="text-3xl
font-semibold
text-gray-900">
Sign in
</h1>
<p class="mt-2
text-gray-500">
Sign in below to access your account
</p>
</div>
<div class="mt-5">
<form action="">
<!-- Email Input -->
<div class="relative mt-6">
<input id="email" type="email"
class="peer w-full
border-b-2 border-gray-300
placeholder-transparent
focus:outline-none
focus:border-blue-500"
placeholder="Email" required />
<label for="email"
class="absolute
left-0 ml-1 -top-3.5
bg-white px-1 text-sm text-gray-600
duration-200 transform scale-75
origin-[0] peer-placeholder-shown:top-2.5
peer-placeholder-shown:scale-100
peer-placeholder-shown:text-base
peer-placeholder-shown:text-gray-500
peer-focus:-top-3.5
peer-focus:scale-75
peer-focus:text-blue-500">
EMAIL
</label>
</div>
<!-- Password Input -->
<div class="relative mt-6">
<input id="password" type="password"
class="peer w-full border-b-2
border-gray-300 placeholder-transparent
focus:outline-none focus:border-blue-500"
placeholder="Password"
required />
<label for="password"
class="absolute left-0 ml-1 -top-3.5 bg-white px-1
text-sm text-gray-600 duration-200
transform scale-75 origin-[0]
peer-placeholder-shown:top-2.5
peer-placeholder-shown:scale-100
peer-placeholder-shown:text-base
peer-placeholder-shown:text-gray-500
peer-focus:-top-3.5 peer-focus:scale-75
peer-focus:text-blue-500">
PASSWORD
</label>
</div>
<button class="mt-10 w-full rounded-md
bg-slate-600 py-2 px-5
text-white hover:bg-slate-700">
Submit
</button>
</form>
</div>
</div>
</body>
</html>
Output: