Floating Labels with Tailwind CSS

Tailwind Labs

In this video, you’ll learn how to pull off that cool “floating labels” effect using just Tailwind CSS utility classes. We’ll use a bunch of new features added in Tailwind CSS v2.2, including the new placeholder-shown variants and the `peer` sibling selector variant.

Source code: https://play.tailwindcss.com/cwqORB8ee7
Tailwind CSS v2.2: https://blog.tailwindcss.com/tailwindcss-2-2