DEV Community

Floating Form Field with Tailwind CSS

Marc Stammerjohann on May 28, 2020

In the following lesson you will learn how to use Tailwind CSS utility-first approach to create a floating form field known from Material Design. T...
Read full post
Collapse
 
garygrossgarten profile image
Gary Großgarten notiz.dev •

Cool, wanna see more tailwind components 👀

Collapse
 
fayaz profile image
Fayaz Ahmed •

Tailwind is just awesome. I wrote something - dev.to/fayazara/making-a-navigatio...

Collapse
 
garygrossgarten profile image
Gary Großgarten notiz.dev •

Thanks for sharing!

Collapse
 
marcjulian profile image
Marc Stammerjohann notiz.dev •

Awesome, thanks for sharing.

Collapse
 
jonaslinn profile image
Jonas Linn •

Hi Marc,

you have a slight error in your markup. The input elements are missing its id. Currently the for attribute on the labels has no corresponding id in the markup.

My preferred markup(not tested) would look like this. You don't need an id or for if you wrap the <input> in the <label>. The label might need display: block;.

<label class="outline relative border-2 focus-within:border-blue-500">
    <input name="username" placeholder=" " class="block p-4 w-full text-lg appearance-none focus:outline-none bg-transparent">
    <span class="absolute top-0 text-lg bg-white p-4 -z-1 duration-300 origin-0">Username</span>
</label>
Collapse
 
marcjulian profile image
Marc Stammerjohann notiz.dev •

Hi Jonas, thanks for catching that the id from the input is missing. Looks like a nice workaround, I will try it out!

Collapse
 
gerka profile image
German Bidzilja •

Cool! A very clear tutorial! Nice results as well.

Collapse
 
marcjulian profile image
Marc Stammerjohann notiz.dev •

Thanks! and its easily customisable with tailwind