Create Floating Label Input Using Tailwind CSS
Tags: webdev, tailwindcss, frontend, css
Published: 2024-06-09 17:15:20

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

Here's the result
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wb0uw0dplzqtlrkvwzy.gif)

You wanna try?, lets go.

_1. We assume that you already have a tailwind project._
_2. Create a structure HTML like below._
```HTML
<div class="relative">
  <input id="email" type="email" placeholder="" />
  <label for="email">Email</label>
</div>
```
_3. Add some tailwind style._

```HTML
<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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zcq7ry6y2p6i1df6uovw.png)
- 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._
```HTML
<label for="email" class="absolute top-4 scale-75 -translate-y-3 origin-[0] left-4">Email</label>
```
to look like this.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e8zfm9mmzw82im0w9ew9.png)
- More about scale [Scale Tailwind CSS](https://tailwindcss.com/docs/scale)
- The translate technique produces a moving effect according `x` or `y`coordinates.
- 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._

```HTML
<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._
```HTML
<label for="email" class="... duration-150">Email</label>
```
- You just add duration, it will add a smoother transformation effect.

Congratulation it's finished

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w492j50l69yajqsedyac.gif)

Full code

```HTML
<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](https://www.instagram.com/driannaird/)
And give the fire🔥🔥🔥🔥🔥
Thank you.