This tab component uses animated pill indicators and smooth state transitions for compact content switching.
HTML
<div class="tabs-pill">
<input type="radio" name="tabs" id="tab-1" checked>
<label for="tab-1">Overview</label>
<input type="radio" name="tabs" id="tab-2">
<label for="tab-2">Details</label>
<input type="radio" name="tabs" id="tab-3">
<label for="tab-3">Stats</label>
</div>CSS
.tabs-pill {
width: 200px;
padding: 0.4rem;
border-radius: 999px;
background: #f3f4f6;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.25rem;
font-family: system-ui, sans-serif;
}
.tabs-pill input {
display: none;
}
.tabs-pill label {
padding: 0.35rem 0;
border-radius: 999px;
font-size: 12px;
text-align: center;
background: transparent;
color: #374151;
cursor: pointer;
transition: background 200ms ease, color 200ms ease;
}
.tabs-pill input:checked + label {
background: #6366f1;
color: #ffffff;
}
@media (prefers-color-scheme: dark) {
.tabs-pill {
background: #111827;
}
.tabs-pill label {
color: #e5e7eb;
}
.tabs-pill input:checked + label {
background: #818cf8;
color: #020617;
}
}Notes
- Clear active-state communication
- Smooth transitions without JS
- Ideal for compact dashboards
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.