Segmented Surface Tabs

A segmented surface tabs component built with pure HTML and CSS that groups tab controls within a unified surface container. It enhances content switching clarity and structured segmentation without requiring JavaScript.

Usage

Use this component when interfaces require grouped tab navigation, such as pricing toggles, dashboard filters, feature breakdowns, or settings panels that benefit from clear visual segmentation.

Implementation

The tab switching is handled using CSS state selectors and controlled content visibility techniques, while the segmented styling is achieved through shared background containers and subtle divider styling. Responsive rules maintain alignment across devices.

HTML

<div class="tabs-segmented">
  <button class="is-active">Summary</button>
  <button>Usage</button>
  <button>Billing</button>
</div>

<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);
  }
}

.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

• Built with pure HTML and CSS
• No JavaScript required
• Uses segmented tab grouping structure
• Enhances navigation segmentation clarity
• Fully responsive across breakpoints
• Suitable for dashboards and content panels
• Easy to customize segment spacing and colors

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.