The Peer Modifier

The peer modifier lets a sibling element react to the state of a preceding element. Mark the triggering element peer, then use peer-{state}: on any following sibling.

Floating label pattern

<div class="relative">
  <input
    type="text"
    placeholder=" "
    class="peer block w-full px-3 pt-5 pb-2 border border-gray-300 rounded-md
      text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
  />
  <label
    class="absolute left-3 top-3.5 text-gray-500 text-sm transition-all
      peer-placeholder-shown:top-3.5 peer-placeholder-shown:text-sm
      peer-focus:top-1 peer-focus:text-xs peer-focus:text-blue-600"
  >
    Full name
  </label>
</div>

Custom toggle switch

<label class="flex items-center cursor-pointer">
  <input type="checkbox" class="peer sr-only" />
  <div class="w-11 h-6 bg-gray-200 rounded-full peer-checked:bg-blue-600
    peer-focus:ring-2 peer-focus:ring-blue-300 relative
    after:absolute after:top-0.5 after:left-0.5 after:bg-white
    after:rounded-full after:h-5 after:w-5 after:transition-all
    peer-checked:after:translate-x-5"></div>
  <span class="ml-3 text-sm font-medium text-gray-700">Enable notifications</span>
</label>

sr-only hides the native checkbox visually while keeping it accessible to screen readers. peer-checked: then drives the visual toggle. This is the standard accessible custom checkbox pattern in Tailwind.