FREE CSS COMPONENT

Tabs

Use real buttons for interactive tabs and expose the active state with aria-selected in production.

Live preview

OverviewDetailsActivity

HTML

<div class="demo-tabs">
  <button type="button" aria-selected="true">Overview</button>
  <button type="button" aria-selected="false">Details</button>
  <button type="button" aria-selected="false">Activity</button>
</div>

CSS

.demo-tabs{display:flex;gap:22px;border-bottom:1px solid #ddd}.demo-tabs span{padding:10px 2px;color:#777;font:600 13px Inter,sans-serif}.demo-tabs span.active{color:#111;border-bottom:2px solid #111}