CSS accordion
details/summary styled accordion, no JS.
Avatar stack
Overlapping circular avatars using negative margins and z-index stacking.
Breadcrumb navigation
A breadcrumb navigation with CSS flexbox and pseudo-element separators.
Card skeleton loading state
Shimmer loading skeleton for cards using CSS animations.
CSS-only toggle
Checkbox-driven toggle switch with no JavaScript.
:has() dropdown
Style a parent when a child is open using :has().
Styled text input
A polished text input with focus-visible state, placeholder, and oklch colors.
Pricing card
A pricing tier card with a highlighted popular option using scale transform and oklch accent colors.
Primary button
Production-ready primary button with hover, focus, active, and disabled states.
Progress bar
A styled progress element with animated fill using pseudo-elements and an accent-color fallback.
Tag cloud / chip group
A flex-wrap tag cloud with consistent chip styling using oklch colors.
Anchor-positioned tooltip
CSS Anchor Positioning tooltip — tethered via anchor-name / anchor().
CSS tooltip
A pure CSS tooltip using ::after and attr() that appears on hover with a smooth transition.
Top navigation bar
Responsive top nav with logo, links, and sticky positioning.