tailblocks Floating Labels in Contact Form.

The form doesn't have any labels. It would be nice to have floating labels on them.

Jun 26 '20 02:06 ShubhamVerma1811

@ShubhamVerma1811 Can you specify which forms you are talking about and attach any example screenshot?

Jul 20 '22 10:07 mohitm15

Hey @mohitm15, Wow this has been inactive for 2 years. Anyways, all the forms on Tailblocks lack placeholder. Having floating labels would work great in this case.

Tailwind provides peer and peer-placeholder-shown classes which can be used for floating labels. I've build something similar for my website here https://shubhamverma.me/books. Clicking on "Suggest me a book" would show up forms with floating label.

Same thing could also be implemented in Tailblocks.

Edit: This video also helps https://www.youtube.com/watch?v=nJzKi6oIvBA

Jul 22 '22 10:07 ShubhamVerma1811

Hey @ShubhamVerma181, Sorry for the late reply; I had implemented the change with the tailwind CSS over tailwind play here .

But I could not reproduce it in the react component say contact/dark/c.js because the peer-placeholder-shown classes are not working there. I had used the CSS to produce that behavior but still not getting it.

Aug 13 '22 14:08 mohitm15

@mohitm15 , It might not be working because this project is using a really old version of Tailwind. https://github.com/mertJF/tailblocks/blob/master/public/index.html#L12

Tailwind has there own CDN now, https://tailwindcss.com/docs/installation/play-cdn

I dont think if this project is actively maintained now by the author.

Aug 18 '22 05:08 ShubhamVerma1811

Yes @ShubhamVerma1811 , it is using an old version of tailwind and unfortunately has also not been maintained by the owner now :disappointed:

Aug 24 '22 09:08 mohitm15