Tabs Generator
Build tab navigation in three styles with editable labels, colours, padding and an active state. Copy the CSS.
.tabs { display: flex; gap: 4px; border-bottom: 1px solid #232836; }
.tab {
padding: 8px 16px; font-size: 14px; font-weight: 600;
color: #94a3b8; cursor: pointer; border-bottom: 2px solid transparent;
background: transparent; border: none; transition: all .2s ease;
}
.tab.active { border-bottom-color: #6d5efc; color: #6d5efc; }About the tabs generator
Tabs let one region of a page hold several views. The three styles here cover nearly every case: an underline for content-heavy pages, pills for compact filters, and boxes when the tabs need to feel like distinct panels.
The active state is the part that matters. It has to be obvious at a glance which tab is selected, which is why each style handles it differently.
How to use it
- 1Choose a style, then add or rename tabs.
- 2Click a tab in the preview to see the active treatment.
- 3Set the accent colour and the inactive text colour.
- 4Adjust padding, radius and font size.
- 5Copy the CSS.
Worth knowing
- For accessibility use role="tablist" and aria-selected, and let arrow keys move between tabs.
Questions
Which tab style should I use?
Underline for reading-heavy pages, since it is the least visually noisy. Pills for filters and compact controls. Boxes when the tab needs to look connected to the panel below it.
How do I make tabs accessible?
Use role="tablist" on the container, role="tab" with aria-selected on each tab, and role="tabpanel" on the content. Arrow keys should move between tabs, not Tab.
Can tabs scroll on mobile?
Yes. Give the container overflow-x: auto and prevent wrapping, which is better than shrinking the labels until they are unreadable.