Group & Peer

Style children based on parent or sibling state

Group and peer let you style elements based on the state of a parent or sibling, without JavaScript.

Style a child when hovering over a parent marked with 'group'.

Card Title

Hover this card to see group styles

Revealed on hover

Tailwind CSS

<div class="group rounded-lg border p-4
  hover:bg-blue-50">
  <h3 class="group-hover:text-blue-600">
    Card Title
  </h3>
  <p class="group-hover:text-blue-400">
    Hover the card
  </p>
  <span class="opacity-0 group-hover:opacity-100">
    Revealed on hover
  </span>
</div>

27 / 35