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 Parallax Effect in Tailwind CSS ?

abhishekm7tq

Improve

Article Tags :

How to Create Floating Label in Tailwind CSS?

Approach

Similar Reads

Thank You!

What kind of Experience do you want to share?