Tabs Lab · Visual Playground

1. Underline Tabs — classic with a colored underline on active

Overview

Content for the active tab appears here. Click above to switch.

<div class="bar">
  <button class="active">Overview</button>
  <button>Specs</button>
  <button>Reviews</button>
</div>
<div class="panel">...</div>
.bar {
  display: flex;
  border-bottom: 1px solid #eee;
}

.bar button {
  padding: 12px 16px;
  background: transparent;
  border: none;
  color: #666;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px; /* overlap parent border */
}

.bar button.active {
  color: #ec4899;
  border-bottom-color: #ec4899;
  font-weight: 600;
}

2. Pill Tabs — segmented control style, great for filters

Segmented pill tabs — iOS-style. One active at a time.

<div class="bar">
  <button class="active">All</button>
  <button>Popular</button>
</div>
.bar {
  display: inline-flex;
  gap: 4px;
  background: #f4f4f5;
  padding: 4px;
  border-radius: 999px;
}

.bar button {
  padding: 8px 16px;
  border-radius: 999px;
  background: transparent;
  border: none;
  font-weight: 600;
}

.bar button.active {
  background: #111;
  color: #fff;
}

3. Vertical Tabs — settings-page style, left rail of sections

Profile settings

Your public profile, avatar, name, and bio.

<div class="settings">
  <div class="bar">
    <button class="active">Profile</button>
    <button>Security</button>
  </div>
  <div class="panel">...</div>
</div>
.settings {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 22px;
}

.bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bar button {
  text-align: left;
  padding: 10px 14px;
  border-radius: 8px;
}

.bar button.active {
  background: #ec4899;
  color: #fff;
}

4. Sliding Indicator — animated pill slides between tabs on click

The indicator smoothly animates with CSS transitions.

<div class="bar">
  <span class="indicator"></span>
  <button class="active">Monthly</button>
  <button>Quarterly</button>
</div>
.bar { position: relative; }

.indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  border-radius: 999px;
  transition: all .35s cubic-bezier(.2,.8,.3,1);
  z-index: 0;
}

.bar button { position: relative; z-index: 1; }
.bar button.active { color: #fff; }
// Position indicator over the active button
const bar = document.querySelector('.bar');
const indicator = bar.querySelector('.indicator');

const updateIndicator = (btn) => {
  indicator.style.left  = btn.offsetLeft + 'px';
  indicator.style.width = btn.offsetWidth + 'px';
};

bar.querySelectorAll('button').forEach(btn => {
  btn.addEventListener('click', () => {
    bar.querySelectorAll('button').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    updateIndicator(btn);
  });
});

updateIndicator(bar.querySelector('.active'));

5. Icon Tabs — icon + label stacked, mobile-app style

Icons make tabs scannable at a glance — especially in compact spaces.

<button class="active">
  <i class="ph-fill ph-house"></i>
  Home
</button>
.bar button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px;
}

.bar button i { font-size: 1.4rem; }

6. Badge Tabs — unread / count pill next to label

Perfect for mail apps, notifications, and task lists.

<button class="active">
  Inbox <span class="badge">12</span>
</button>
.badge {
  background: #e5e7eb;
  color: #333;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}

/* Active tab's badge pops with brand color */
.bar button.active .badge {
  background: #ec4899;
  color: #fff;
}

7. Card Tabs — stacked labels + sublabels inside rounded cards

Works well for pricing, plan selectors, or multi-option configurators.

<button class="active">
  Starter
  <small>Free</small>
</button>
.bar {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: #fef3c7;
  border-radius: 12px;
}

.bar button {
  flex: 1;
  padding: 12px 10px;
  text-align: left;
  border-radius: 8px;
}

.bar button small {
  display: block;
  font-size: 11px;
  color: #a16207;
}

.bar button.active {
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}