selector pills tabs product switcher intuit multi-product features interactive selector pills tabs product switcher multi-product intuit features content panel product switcher with pills and content panel Intuit-style brand product tab section multi-product homepage section with pill navigation
Selector Pills Base
Fetch pattern JSON:
curl https://webspire.de/patterns/selector-pills/base.json base.html
<section class="ws-selector-pills bg-[var(--ws-selector-pills-bg)] py-20">
<div class="mx-auto max-w-5xl px-6">
<!-- Header -->
<div class="mb-10 text-center">
<p class="mb-2 text-xs font-semibold uppercase tracking-[0.2em] text-[var(--ws-color-primary)]">Everything you need</p>
<h2 class="text-3xl font-bold tracking-tight text-[var(--ws-selector-pills-text)] sm:text-4xl">
One suite. Every team.
</h2>
</div>
<!-- Pill selector -->
<div class="flex flex-wrap justify-center gap-2 mb-10" role="tablist" aria-label="Product selector">
<button
type="button"
role="tab"
aria-selected="true"
aria-controls="pill-panel-1"
id="pill-tab-1"
onclick="selectPill(this, 'pill-panel-1')"
class="pill-btn inline-flex items-center gap-2 rounded-full border border-[var(--ws-selector-pills-pill-border)] bg-[var(--ws-selector-pills-pill-active-bg)] px-5 py-2.5 text-sm font-semibold text-[var(--ws-selector-pills-pill-active-text)] transition"
>
<!-- Icon placeholder: bookkeeping/finance -->
<svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 11h.01M12 11h.01M15 11h.01M9 14h.01M12 14h.01M15 14h.01M5 4h14a2 2 0 012 2v12a2 2 0 01-2 2H5a2 2 0 01-2-2V6a2 2 0 012-2z"/></svg>
Accounting
</button>
<button
type="button"
role="tab"
aria-selected="false"
aria-controls="pill-panel-2"
id="pill-tab-2"
onclick="selectPill(this, 'pill-panel-2')"
class="pill-btn inline-flex items-center gap-2 rounded-full border border-[var(--ws-selector-pills-pill-border)] bg-[var(--ws-selector-pills-pill-bg)] px-5 py-2.5 text-sm font-semibold text-[var(--ws-selector-pills-pill-text)] transition hover:bg-[var(--ws-selector-pills-pill-bg-hover)]"
>
<svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
HR & Payroll
</button>
<button
type="button"
role="tab"
aria-selected="false"
aria-controls="pill-panel-3"
id="pill-tab-3"
onclick="selectPill(this, 'pill-panel-3')"
class="pill-btn inline-flex items-center gap-2 rounded-full border border-[var(--ws-selector-pills-pill-border)] bg-[var(--ws-selector-pills-pill-bg)] px-5 py-2.5 text-sm font-semibold text-[var(--ws-selector-pills-pill-text)] transition hover:bg-[var(--ws-selector-pills-pill-bg-hover)]"
>
<svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
Marketing
</button>
<button
type="button"
role="tab"
aria-selected="false"
aria-controls="pill-panel-4"
id="pill-tab-4"
onclick="selectPill(this, 'pill-panel-4')"
class="pill-btn inline-flex items-center gap-2 rounded-full border border-[var(--ws-selector-pills-pill-border)] bg-[var(--ws-selector-pills-pill-bg)] px-5 py-2.5 text-sm font-semibold text-[var(--ws-selector-pills-pill-text)] transition hover:bg-[var(--ws-selector-pills-pill-bg-hover)]"
>
<svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
Analytics
</button>
</div>
<!-- Content panels -->
<div class="rounded-2xl border border-[var(--ws-selector-pills-panel-border)] bg-[var(--ws-selector-pills-panel-bg)] overflow-hidden">
<!-- Panel 1 — Accounting -->
<div id="pill-panel-1" role="tabpanel" aria-labelledby="pill-tab-1" class="grid grid-cols-1 gap-0 md:grid-cols-2">
<div class="p-8 md:p-10">
<span class="inline-flex rounded-full bg-[var(--ws-color-primary-soft)] px-3 py-1 text-xs font-semibold text-[var(--ws-color-primary)]">Accounting</span>
<h3 class="mt-4 text-2xl font-bold tracking-tight text-[var(--ws-selector-pills-text)]">Close the books faster than ever.</h3>
<p class="mt-3 leading-relaxed text-[var(--ws-selector-pills-text-soft)]">Automate reconciliation, real-time bank feeds, and multi-entity consolidation — no manual spreadsheets required.</p>
<ul class="mt-6 space-y-2">
<li class="flex items-center gap-2.5 text-sm text-[var(--ws-selector-pills-text-soft)]">
<svg class="size-4 shrink-0 text-[var(--ws-color-primary)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
Automated bank reconciliation
</li>
<li class="flex items-center gap-2.5 text-sm text-[var(--ws-selector-pills-text-soft)]">
<svg class="size-4 shrink-0 text-[var(--ws-color-primary)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
Multi-currency & multi-entity support
</li>
<li class="flex items-center gap-2.5 text-sm text-[var(--ws-selector-pills-text-soft)]">
<svg class="size-4 shrink-0 text-[var(--ws-color-primary)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
Real-time financial dashboards
</li>
</ul>
<div class="mt-8 flex gap-3">
<a href="#" class="rounded-xl bg-[var(--ws-color-primary)] px-5 py-2.5 text-sm font-semibold text-[var(--ws-color-primary-text)] transition hover:bg-[var(--ws-color-primary-hover)]">Try free</a>
<a href="#" class="rounded-xl border border-[var(--ws-selector-pills-panel-border)] px-5 py-2.5 text-sm font-semibold text-[var(--ws-selector-pills-text)] transition hover:bg-[var(--ws-color-surface-alt)]">Learn more</a>
</div>
</div>
<div class="hidden items-center justify-center bg-[var(--ws-color-surface-alt)] p-10 md:flex">
<div class="aspect-[4/3] w-full max-w-xs rounded-xl bg-[var(--ws-color-surface)] ring-1 ring-[var(--ws-selector-pills-panel-border)] flex items-center justify-center">
<span class="text-xs text-[var(--ws-selector-pills-text-soft)]">Product screenshot</span>
</div>
</div>
</div>
<!-- Panel 2 — HR (hidden) -->
<div id="pill-panel-2" role="tabpanel" aria-labelledby="pill-tab-2" hidden class="grid grid-cols-1 gap-0 md:grid-cols-2">
<div class="p-8 md:p-10">
<span class="inline-flex rounded-full bg-[var(--ws-color-primary-soft)] px-3 py-1 text-xs font-semibold text-[var(--ws-color-primary)]">HR & Payroll</span>
<h3 class="mt-4 text-2xl font-bold tracking-tight text-[var(--ws-selector-pills-text)]">Your people, perfectly managed.</h3>
<p class="mt-3 leading-relaxed text-[var(--ws-selector-pills-text-soft)]">From hiring to offboarding, automate HR admin and run payroll with confidence across every jurisdiction.</p>
<ul class="mt-6 space-y-2">
<li class="flex items-center gap-2.5 text-sm text-[var(--ws-selector-pills-text-soft)]"><svg class="size-4 shrink-0 text-[var(--ws-color-primary)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Global payroll in 50+ countries</li>
<li class="flex items-center gap-2.5 text-sm text-[var(--ws-selector-pills-text-soft)]"><svg class="size-4 shrink-0 text-[var(--ws-color-primary)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Self-service employee portal</li>
<li class="flex items-center gap-2.5 text-sm text-[var(--ws-selector-pills-text-soft)]"><svg class="size-4 shrink-0 text-[var(--ws-color-primary)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Automated compliance reporting</li>
</ul>
<div class="mt-8 flex gap-3">
<a href="#" class="rounded-xl bg-[var(--ws-color-primary)] px-5 py-2.5 text-sm font-semibold text-[var(--ws-color-primary-text)] transition hover:bg-[var(--ws-color-primary-hover)]">Try free</a>
<a href="#" class="rounded-xl border border-[var(--ws-selector-pills-panel-border)] px-5 py-2.5 text-sm font-semibold text-[var(--ws-selector-pills-text)] transition hover:bg-[var(--ws-color-surface-alt)]">Learn more</a>
</div>
</div>
<div class="hidden items-center justify-center bg-[var(--ws-color-surface-alt)] p-10 md:flex">
<div class="aspect-[4/3] w-full max-w-xs rounded-xl bg-[var(--ws-color-surface)] ring-1 ring-[var(--ws-selector-pills-panel-border)] flex items-center justify-center">
<span class="text-xs text-[var(--ws-selector-pills-text-soft)]">Product screenshot</span>
</div>
</div>
</div>
<!-- Panel 3 — Marketing (hidden) -->
<div id="pill-panel-3" role="tabpanel" aria-labelledby="pill-tab-3" hidden class="grid grid-cols-1 gap-0 md:grid-cols-2">
<div class="p-8 md:p-10">
<span class="inline-flex rounded-full bg-[var(--ws-color-primary-soft)] px-3 py-1 text-xs font-semibold text-[var(--ws-color-primary)]">Marketing</span>
<h3 class="mt-4 text-2xl font-bold tracking-tight text-[var(--ws-selector-pills-text)]">Reach the right audience at the right time.</h3>
<p class="mt-3 leading-relaxed text-[var(--ws-selector-pills-text-soft)]">Plan campaigns, segment audiences, and measure ROI across every channel from one connected workspace.</p>
<ul class="mt-6 space-y-2">
<li class="flex items-center gap-2.5 text-sm text-[var(--ws-selector-pills-text-soft)]"><svg class="size-4 shrink-0 text-[var(--ws-color-primary)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Email & SMS automation</li>
<li class="flex items-center gap-2.5 text-sm text-[var(--ws-selector-pills-text-soft)]"><svg class="size-4 shrink-0 text-[var(--ws-color-primary)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>AI-powered audience segmentation</li>
<li class="flex items-center gap-2.5 text-sm text-[var(--ws-selector-pills-text-soft)]"><svg class="size-4 shrink-0 text-[var(--ws-color-primary)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Unified campaign attribution</li>
</ul>
<div class="mt-8 flex gap-3">
<a href="#" class="rounded-xl bg-[var(--ws-color-primary)] px-5 py-2.5 text-sm font-semibold text-[var(--ws-color-primary-text)] transition hover:bg-[var(--ws-color-primary-hover)]">Try free</a>
<a href="#" class="rounded-xl border border-[var(--ws-selector-pills-panel-border)] px-5 py-2.5 text-sm font-semibold text-[var(--ws-selector-pills-text)] transition hover:bg-[var(--ws-color-surface-alt)]">Learn more</a>
</div>
</div>
<div class="hidden items-center justify-center bg-[var(--ws-color-surface-alt)] p-10 md:flex">
<div class="aspect-[4/3] w-full max-w-xs rounded-xl bg-[var(--ws-color-surface)] ring-1 ring-[var(--ws-selector-pills-panel-border)] flex items-center justify-center">
<span class="text-xs text-[var(--ws-selector-pills-text-soft)]">Product screenshot</span>
</div>
</div>
</div>
<!-- Panel 4 — Analytics (hidden) -->
<div id="pill-panel-4" role="tabpanel" aria-labelledby="pill-tab-4" hidden class="grid grid-cols-1 gap-0 md:grid-cols-2">
<div class="p-8 md:p-10">
<span class="inline-flex rounded-full bg-[var(--ws-color-primary-soft)] px-3 py-1 text-xs font-semibold text-[var(--ws-color-primary)]">Analytics</span>
<h3 class="mt-4 text-2xl font-bold tracking-tight text-[var(--ws-selector-pills-text)]">Decisions backed by real data.</h3>
<p class="mt-3 leading-relaxed text-[var(--ws-selector-pills-text-soft)]">Query, visualize, and act on your data without waiting on engineering. From operational metrics to executive dashboards.</p>
<ul class="mt-6 space-y-2">
<li class="flex items-center gap-2.5 text-sm text-[var(--ws-selector-pills-text-soft)]"><svg class="size-4 shrink-0 text-[var(--ws-color-primary)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Self-serve BI with no SQL required</li>
<li class="flex items-center gap-2.5 text-sm text-[var(--ws-selector-pills-text-soft)]"><svg class="size-4 shrink-0 text-[var(--ws-color-primary)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>100+ data connectors</li>
<li class="flex items-center gap-2.5 text-sm text-[var(--ws-selector-pills-text-soft)]"><svg class="size-4 shrink-0 text-[var(--ws-color-primary)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Embeddable charts for your product</li>
</ul>
<div class="mt-8 flex gap-3">
<a href="#" class="rounded-xl bg-[var(--ws-color-primary)] px-5 py-2.5 text-sm font-semibold text-[var(--ws-color-primary-text)] transition hover:bg-[var(--ws-color-primary-hover)]">Try free</a>
<a href="#" class="rounded-xl border border-[var(--ws-selector-pills-panel-border)] px-5 py-2.5 text-sm font-semibold text-[var(--ws-selector-pills-text)] transition hover:bg-[var(--ws-color-surface-alt)]">Learn more</a>
</div>
</div>
<div class="hidden items-center justify-center bg-[var(--ws-color-surface-alt)] p-10 md:flex">
<div class="aspect-[4/3] w-full max-w-xs rounded-xl bg-[var(--ws-color-surface)] ring-1 ring-[var(--ws-selector-pills-panel-border)] flex items-center justify-center">
<span class="text-xs text-[var(--ws-selector-pills-text-soft)]">Product screenshot</span>
</div>
</div>
</div>
</div>
</div>
<script>
function selectPill(btn, panelId) {
const container = btn.closest('section');
// Update pill states
container.querySelectorAll('[role="tab"]').forEach(function(tab) {
const isActive = tab === btn;
tab.setAttribute('aria-selected', isActive ? 'true' : 'false');
if (isActive) {
tab.classList.add('bg-[var(--ws-selector-pills-pill-active-bg)]', 'text-[var(--ws-selector-pills-pill-active-text)]');
tab.classList.remove('bg-[var(--ws-selector-pills-pill-bg)]', 'text-[var(--ws-selector-pills-pill-text)]');
} else {
tab.classList.remove('bg-[var(--ws-selector-pills-pill-active-bg)]', 'text-[var(--ws-selector-pills-pill-active-text)]');
tab.classList.add('bg-[var(--ws-selector-pills-pill-bg)]', 'text-[var(--ws-selector-pills-pill-text)]');
}
});
// Show/hide panels
container.querySelectorAll('[role="tabpanel"]').forEach(function(panel) {
if (panel.id === panelId) {
panel.removeAttribute('hidden');
} else {
panel.setAttribute('hidden', '');
}
});
}
</script>
</section>
Details
Responsive Dark Mode Tailwind Only Copy & Paste Requires JS
Stable Published
selectorpillstabsproductswitcherintuitmulti-productfeaturesinteractive
Slots
| Name | Required | Description |
|---|---|---|
| pills | Yes | One pill button per product — icon, label, aria-controls pointing to its panel. |
| panels | Yes | One content panel per pill — headline, feature list, CTAs, screenshot placeholder. |
Props
| Name | Type | Default | Description |
|---|---|---|---|
| defaultActive | string | pill-panel-1 | ID of the panel that is visible on initial load. |
Multi-product overview section with pill-tab navigation. Each pill activates a content panel with headline, feature bullets, dual CTAs, and a screenshot area.
Add or remove pill/panel pairs as needed — just keep aria-controls on each pill in sync with the id on its panel.