DEV Community

Discussion on: Floating Form Field with Tailwind CSS

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>
marcjulian profile image
Marc Stammerjohann Author

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