input-float-label

Create Input Float Labels using Tailwind CSS

In this blog, We will learn how to create input float labels using Tailwind CSS. Float labels are a way to make your forms look modern and keep things user-friendly. They keep the label visible even after the user starts typing! Creating one with Tailwind CSS is easy.

In this blog, We will learn how to create input float labels using Tailwind CSS. Float labels are a way to make your forms look modern and keep things user-friendly. They keep the label visible even after the user starts typing! Creating one with Tailwind CSS is easy.

The Code:

<div class="m-10 bg-white">
    <div class="relative bg-inherit">
        <input type="text"
          id="input-field"
          class="peer bg-transparent h-10 w-72 rounded-lg text-gray-600 placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-none"

          placeholder="Username"
        >

        <label for="input-field" class="absolute cursor-text left-0 -top-3 text-sm text-gray-500 bg-inherit mx-1 px-1 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-600 peer-placeholder-shown:top-2 peer-focus:-top-3 peer-focus:text-sky-600 peer-focus:text-sm transition-all">
          Username
        </label>
    </div>
</div>

Result:

input-float-label

Try it out and tweak the colors, sizes, or styles to match your vibe. Tailwind CSS makes it easy to go from meh to wow! 🎨