How to Create Floating Label in Tailwind CSS?

How to Create Floating Label in Tailwind CSS?

Last Updated : 22 Aug, 2024

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.

HTML

<!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"></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:

How to Create Floating Label in Tailwind CSS?

A

abhishekm7tq

Improve

Article Tags :

Similar Reads

How to Create Floating Button in Tailwind CSS?

A floating button is a popular UI design feature used to quickly access actions like adding, saving, or navigating to website users. We can easily create a floating button in Tailwind CSS. Tailwind CSS makes it very easy to create a floating button with its utility-first approach, which allows us to

How to Make Floating Card Effect in Tailwind CSS?

Floating card effect using Tailwind CSS is fun to make and explore. It is basically all about using the classes of Tailwind CSS to create cards when hovered upon have a floating effect, such that they are replaced from their position, either get transformed, or move up or down in their positions. we

How to Create Gradient Text with Tailwind CSS?

Gradient text adds visual appeal to user interfaces enhancing the design and attracting attention to important elements. we will learn how to create gradient text using Tailwind CSS in a React project. Gradient text can add a vibrant and visually appealing effect to your UI and make important headli

How to make Div on Top of Another in Tailwind CSS ?

Positioning elements in Tailwind CSS allows for creating complex layouts with ease. One common requirement is overlaying one div on top of another. Below are the approaches to make div on top of another in Tailwind CSS: Table of Content Absolute Positioning and Z-indexTailwind CSS Utility Classes fo

How to Create Glowing Background Gradient Effects in Tailwind CSS?

Glowing background gradient effects can add a dynamic and visually appealing element to your web design. In Tailwind CSS, achieving this effect involves combining gradient utilities with custom styles. This guide will explore different methods to create glowing gradient effects.These are the followi