These tabs use segmented surfaces with elevation changes to indicate state, avoiding underlines, gliders, or sliders entirely.
HTML
<div class="tabs-segmented">
<button class="is-active">Summary</button>
<button>Usage</button>
<button>Billing</button>
</div>CSS
.tabs-segmented {
width: 200px;
padding: 0.3rem;
border-radius: 14px;
background: #f3f4f6;
display: flex;
gap: 0.25rem;
}
.tabs-segmented button {
flex: 1;
padding: 0.4rem 0;
border-radius: 10px;
border: none;
background: transparent;
font-size: 12px;
color: #4b5563;
cursor: pointer;
transition: background 150ms ease, box-shadow 150ms ease, color 150ms ease;
}
.tabs-segmented button.is-active {
background: #ffffff;
color: #111827;
font-weight: 600;
box-shadow: 0 6px 12px rgba(0,0,0,0.12);
}
@media (prefers-color-scheme: dark) {
.tabs-segmented {
background: #020617;
}
.tabs-segmented button {
color: #9ca3af;
}
.tabs-segmented button.is-active {
background: #111827;
color: #e5e7eb;
box-shadow: 0 6px 14px rgba(0,0,0,0.6);
}
}Notes
- Surface-based state indication
- No underlines, indicators, or motion rails
- Ideal for compact settings and preference panels
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.