Create Floating Label Input Using Tailwind CSS

Hi guys, I wanna show you about floating label input of course using tailwind css😎

Here's the result

You wanna try?, lets go.

1. We assume that you already have a tailwind project.
2. Create a structure HTML like below.

<div class="relative">
  <input id="email" type="email" placeholder="" />
  <label for="email">Email</label>
</div>

3. Add some tailwind style.

<div class="relative">
  <input id="email" type="email" placeholder="" class="block border border-zinc-500 px-4 pb-1 pt-6" />
  <label for="email" class="absolute top-4">Email</label>
</div>

result

• We make the display input elements into block and the position label elements into absolute, of course you need relative position on the parent element.
• Adding some styles in input like a border (It depends on your creativity🔥).
• Give space for placeholder made from label.
• Then adjust the position label so then look like the result above.

4. Move and Scale the label.

<label for="email" class="absolute top-4 scale-75 -translate-y-3 origin-[0] left-4">Email</label>

to look like this.

• More about scale Scale Tailwind CSS
• The translate technique produces a moving effect according x or ycoordinates.
• The origin-[0] utilities for specifying the origin for an element's transformations.

5. Creates a label effect from the displayed placeholder input and if the input is focused using peer.

<div class="relative">
    <input id="email" type="email" class="peer block border border-zinc-500 px-4 pb-1 pt-6" placeholder="" />
    <label for="email" class="absolute left-4 top-4 origin-[0] -translate-y-3 scale-75 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-3 peer-focus:scale-75">Email</label>
</div>

• When you need to style an element based on the state of a sibling element, mark the sibling with the peer class, and use peer-* modifiers like peer-invalid to style the target element. In the example above, I gave effect when input placeholder shown and input focus.

6. Last step, transition effect.

<label for="email" class="... duration-150">Email</label>

• You just add duration, it will add a smoother transformation effect.

Congratulation it's finished

Full code

<div class="relative">
  <input id="email" type="email" class="peer block border border-zinc-500 px-4 pb-1 pt-6" placeholder="" />
  <label for="email" class="absolute left-4 top-4 origin-[0] -translate-y-3 scale-75 duration-150 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-3 peer-focus:scale-75">Email</label>
</div>

Follow my instagram: @driannaird
And give the fire🔥🔥🔥🔥🔥
Thank you.