Tag cloud / chip group

Quick implementation

.tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 10rem;
  background: oklch(0.94 0.03 260);
  color: oklch(0.35 0.05 260);
  border: 1px solid oklch(0.88 0.04 260);
  transition: background 0.15s ease, color 0.15s ease;
}

.chip:hover {
  background: oklch(0.55 0.2 260);
  color: oklch(0.98 0 0);
  border-color: oklch(0.55 0.2 260);
}

.chip--active {
  background: oklch(0.55 0.2 260);
  color: oklch(0.98 0 0);
  border-color: oklch(0.55 0.2 260);
}

Prompt this to your LLM

Paste this into ChatGPT, Claude, or any LLM to generate tag/chip components.

Create a tag cloud / chip group component with CSS. The container uses
display: flex, flex-wrap: wrap, and gap: 0.5rem. Each chip uses
inline-flex, pill-shaped border-radius (10rem), 0.35rem/0.85rem padding,
0.85rem font-size, and oklch colors: light background oklch(0.94 0.03 260),
dark text oklch(0.35 0.05 260), and a subtle border. On hover and for
an active state, swap to a vivid oklch(0.55 0.2 260) background with
white text. Add 0.15s ease transitions. Use oklch() for all colors.

Why this matters

Tags and chips appear everywhere: filter bars, category labels, skill lists, selected options. flex-wrap with gap is the cleanest way to lay them out — items flow naturally to the next row when space runs out, with consistent spacing. No media queries, no JavaScript, no manual row management.

The logic

flex-wrap: wrap allows items to flow to new lines. gap: 0.5rem sets uniform spacing between items in both axes without margin hacks. border-radius: 10rem creates a perfect pill shape regardless of content width. inline-flex on each chip lets it size to its content while supporting vertical alignment of icons or counts inside. The transition applies only to background and color, keeping the animation lightweight. The active state uses the same styles as hover, creating visual consistency.

Accessibility & performance

If chips are interactive (filters, toggles), use <button> elements with aria-pressed for toggleable chips. For navigation chips, use <a> elements. If purely decorative labels, <span> is fine. Ensure the active/hover state has sufficient color contrast — oklch(0.98 0 0) on oklch(0.55 0.2 260) provides a clear 5:1+ ratio. The component has zero layout thrash — flexbox wrapping is computed once on render and only recalculates when the container resizes.