Floating Labels and Focus Styles

1. Floating Label with Tailwind

Use absolute, peer, and transform utilities:

<div class="relative">
  <input
    type="text"
    id="name"
    placeholder=" "
    class="peer w-full border-b-2 border-gray-300 focus:outline-none focus:border-blue-500 py-2 placeholder-transparent"
  />
  <label
    for="name"
    class="absolute left-0 top-2 text-gray-500 text-sm transition-all peer-placeholder-shown:top-2.5 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-focus:top-0 peer-focus:text-sm peer-focus:text-blue-500"
  >
    Your Name
  </label>
</div>
            

2. How It Works

• placeholder=" " is used to trigger the floating effect without displaying a placeholder.
• peer allows the label to react to the input's focus and placeholder state.
• transition-all + top + text-sm animates the label.

3. Enhancing Focus Styles

Add ring effects or color transitions to improve focus visibility:

<input
  type="email"
  class="w-full border border-gray-300 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400"
/>
            

You can use focus:ring, focus:border, or even focus-visible utilities for keyboard-accessibility styling.

4. Accessibility Tip

Always pair your input with a <label> and use for/id to ensure screen readers and assistive tools work properly.