pricing multi-product tabs selector saas platform switcher pricing multi-product tabs selector platform saas products switcher pricing section for multiple products product category selector above pricing switch between products to see pricing
Pricing Multi-Product Selector
Fetch pattern JSON:
curl https://webspire.de/patterns/pricing/multi-product.json multi-product.html
<section id="pricing" class="ws-pricing bg-[var(--ws-pricing-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="mx-auto max-w-2xl text-center">
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-pricing-highlight-bg)]">Pricing</p>
<h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-pricing-text)] sm:text-4xl">One platform, transparent pricing</h2>
<p class="mt-4 text-base text-[var(--ws-pricing-text-soft)]">Choose the product you need. Each is priced independently so you only pay for what you use.</p>
</div>
<!-- Product selector -->
<div class="mt-10 flex flex-wrap justify-center gap-2" role="tablist" aria-label="Product pricing">
<button role="tab" aria-selected="true" aria-controls="product-panel-1" id="product-tab-1" data-product="1"
class="ws-product-tab rounded-full border border-[var(--ws-pricing-card-border)] bg-[var(--ws-pricing-card-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-pricing-text)] transition-all hover:border-[var(--ws-pricing-highlight-bg)] data-[active]:border-[var(--ws-pricing-highlight-bg)] data-[active]:bg-[var(--ws-pricing-highlight-bg)] data-[active]:text-white">
Secrets Manager
</button>
<button role="tab" aria-selected="false" aria-controls="product-panel-2" id="product-tab-2" data-product="2"
class="ws-product-tab rounded-full border border-[var(--ws-pricing-card-border)] bg-[var(--ws-pricing-card-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-pricing-text)] transition-all hover:border-[var(--ws-pricing-highlight-bg)] data-[active]:border-[var(--ws-pricing-highlight-bg)] data-[active]:bg-[var(--ws-pricing-highlight-bg)] data-[active]:text-white">
Certificate Manager
</button>
<button role="tab" aria-selected="false" aria-controls="product-panel-3" id="product-tab-3" data-product="3"
class="ws-product-tab rounded-full border border-[var(--ws-pricing-card-border)] bg-[var(--ws-pricing-card-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-pricing-text)] transition-all hover:border-[var(--ws-pricing-highlight-bg)] data-[active]:border-[var(--ws-pricing-highlight-bg)] data-[active]:bg-[var(--ws-pricing-highlight-bg)] data-[active]:text-white">
Access Management
</button>
<button role="tab" aria-selected="false" aria-controls="product-panel-4" id="product-tab-4" data-product="4"
class="ws-product-tab rounded-full border border-[var(--ws-pricing-card-border)] bg-[var(--ws-pricing-card-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-pricing-text)] transition-all hover:border-[var(--ws-pricing-highlight-bg)] data-[active]:border-[var(--ws-pricing-highlight-bg)] data-[active]:bg-[var(--ws-pricing-highlight-bg)] data-[active]:text-white">
Secret Scanning
</button>
</div>
<!-- Pricing panels -->
<div id="product-panel-1" role="tabpanel" aria-labelledby="product-tab-1" class="ws-product-panel mt-10">
<div class="grid gap-6 md:grid-cols-3">
<article class="flex flex-col rounded-2xl border border-[var(--ws-pricing-card-border)] bg-[var(--ws-pricing-card-bg)] p-6">
<h3 class="text-lg font-semibold text-[var(--ws-pricing-text)]">Free</h3>
<p class="mt-1 text-sm text-[var(--ws-pricing-text-muted)]">For individuals and small projects</p>
<p class="mt-5 text-3xl font-bold text-[var(--ws-pricing-text)]">$0<span class="text-sm font-medium text-[var(--ws-pricing-text-muted)]">/mo</span></p>
<ul class="mt-5 flex-1 space-y-2 text-sm text-[var(--ws-pricing-text-soft)]">
<li class="flex items-center gap-2"><svg class="h-4 w-4 shrink-0 text-[var(--ws-pricing-highlight-bg)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Up to 5 identities</li>
<li class="flex items-center gap-2"><svg class="h-4 w-4 shrink-0 text-[var(--ws-pricing-highlight-bg)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Unlimited secrets</li>
<li class="flex items-center gap-2"><svg class="h-4 w-4 shrink-0 text-[var(--ws-pricing-highlight-bg)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>3 environments</li>
</ul>
<a href="#" class="mt-6 block rounded-lg border border-[var(--ws-pricing-card-border)] py-2.5 text-center text-sm font-medium text-[var(--ws-pricing-text)] transition hover:border-[var(--ws-pricing-highlight-bg)]">Get started free</a>
</article>
<article class="flex flex-col rounded-2xl border-2 border-[var(--ws-pricing-highlight-bg)] bg-[var(--ws-pricing-card-bg)] p-6 shadow-lg">
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold text-[var(--ws-pricing-text)]">Pro</h3>
<span class="rounded-full bg-[var(--ws-pricing-highlight-bg)] px-2.5 py-0.5 text-xs font-semibold text-white">Most popular</span>
</div>
<p class="mt-1 text-sm text-[var(--ws-pricing-text-muted)]">For growing engineering teams</p>
<p class="mt-5 text-3xl font-bold text-[var(--ws-pricing-text)]">$18<span class="text-sm font-medium text-[var(--ws-pricing-text-muted)]">/mo per identity</span></p>
<ul class="mt-5 flex-1 space-y-2 text-sm text-[var(--ws-pricing-text-soft)]">
<li class="flex items-center gap-2"><svg class="h-4 w-4 shrink-0 text-[var(--ws-pricing-highlight-bg)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Unlimited identities</li>
<li class="flex items-center gap-2"><svg class="h-4 w-4 shrink-0 text-[var(--ws-pricing-highlight-bg)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Dynamic secrets & rotation</li>
<li class="flex items-center gap-2"><svg class="h-4 w-4 shrink-0 text-[var(--ws-pricing-highlight-bg)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Audit log (90 days)</li>
<li class="flex items-center gap-2"><svg class="h-4 w-4 shrink-0 text-[var(--ws-pricing-highlight-bg)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>SAML SSO</li>
</ul>
<a href="#" class="mt-6 block rounded-lg bg-[var(--ws-pricing-highlight-bg)] py-2.5 text-center text-sm font-semibold text-white transition hover:opacity-90">Start free trial</a>
</article>
<article class="flex flex-col rounded-2xl border border-[var(--ws-pricing-card-border)] bg-[var(--ws-pricing-card-bg)] p-6">
<h3 class="text-lg font-semibold text-[var(--ws-pricing-text)]">Enterprise</h3>
<p class="mt-1 text-sm text-[var(--ws-pricing-text-muted)]">For large organizations with custom needs</p>
<p class="mt-5 text-3xl font-bold text-[var(--ws-pricing-text)]">Custom</p>
<ul class="mt-5 flex-1 space-y-2 text-sm text-[var(--ws-pricing-text-soft)]">
<li class="flex items-center gap-2"><svg class="h-4 w-4 shrink-0 text-[var(--ws-pricing-highlight-bg)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Everything in Pro</li>
<li class="flex items-center gap-2"><svg class="h-4 w-4 shrink-0 text-[var(--ws-pricing-highlight-bg)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Unlimited audit log retention</li>
<li class="flex items-center gap-2"><svg class="h-4 w-4 shrink-0 text-[var(--ws-pricing-highlight-bg)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Dedicated support SLA</li>
<li class="flex items-center gap-2"><svg class="h-4 w-4 shrink-0 text-[var(--ws-pricing-highlight-bg)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Self-hosting option</li>
</ul>
<a href="#" class="mt-6 block rounded-lg border border-[var(--ws-pricing-card-border)] py-2.5 text-center text-sm font-medium text-[var(--ws-pricing-text)] transition hover:border-[var(--ws-pricing-highlight-bg)]">Talk to sales</a>
</article>
</div>
</div>
<div id="product-panel-2" role="tabpanel" aria-labelledby="product-tab-2" class="ws-product-panel mt-10 hidden">
<div class="grid gap-6 md:grid-cols-3">
<article class="flex flex-col rounded-2xl border border-[var(--ws-pricing-card-border)] bg-[var(--ws-pricing-card-bg)] p-6">
<h3 class="text-lg font-semibold text-[var(--ws-pricing-text)]">Free</h3>
<p class="mt-1 text-sm text-[var(--ws-pricing-text-muted)]">For testing and evaluation</p>
<p class="mt-5 text-3xl font-bold text-[var(--ws-pricing-text)]">$0<span class="text-sm font-medium text-[var(--ws-pricing-text-muted)]">/mo</span></p>
<ul class="mt-5 flex-1 space-y-2 text-sm text-[var(--ws-pricing-text-soft)]">
<li class="flex items-center gap-2"><svg class="h-4 w-4 shrink-0 text-[var(--ws-pricing-highlight-bg)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>3 certificates</li>
<li class="flex items-center gap-2"><svg class="h-4 w-4 shrink-0 text-[var(--ws-pricing-highlight-bg)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Private CA</li>
<li class="flex items-center gap-2"><svg class="h-4 w-4 shrink-0 text-[var(--ws-pricing-highlight-bg)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Manual renewal</li>
</ul>
<a href="#" class="mt-6 block rounded-lg border border-[var(--ws-pricing-card-border)] py-2.5 text-center text-sm font-medium text-[var(--ws-pricing-text)] transition hover:border-[var(--ws-pricing-highlight-bg)]">Get started free</a>
</article>
<article class="flex flex-col rounded-2xl border-2 border-[var(--ws-pricing-highlight-bg)] bg-[var(--ws-pricing-card-bg)] p-6 shadow-lg">
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold text-[var(--ws-pricing-text)]">Pro</h3>
<span class="rounded-full bg-[var(--ws-pricing-highlight-bg)] px-2.5 py-0.5 text-xs font-semibold text-white">Most popular</span>
</div>
<p class="mt-1 text-sm text-[var(--ws-pricing-text-muted)]">For production workloads</p>
<p class="mt-5 text-3xl font-bold text-[var(--ws-pricing-text)]">$12<span class="text-sm font-medium text-[var(--ws-pricing-text-muted)]">/mo per 10 certs</span></p>
<ul class="mt-5 flex-1 space-y-2 text-sm text-[var(--ws-pricing-text-soft)]">
<li class="flex items-center gap-2"><svg class="h-4 w-4 shrink-0 text-[var(--ws-pricing-highlight-bg)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Unlimited certificates</li>
<li class="flex items-center gap-2"><svg class="h-4 w-4 shrink-0 text-[var(--ws-pricing-highlight-bg)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Auto-renewal</li>
<li class="flex items-center gap-2"><svg class="h-4 w-4 shrink-0 text-[var(--ws-pricing-highlight-bg)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Expiry alerts</li>
<li class="flex items-center gap-2"><svg class="h-4 w-4 shrink-0 text-[var(--ws-pricing-highlight-bg)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>ACME protocol support</li>
</ul>
<a href="#" class="mt-6 block rounded-lg bg-[var(--ws-pricing-highlight-bg)] py-2.5 text-center text-sm font-semibold text-white transition hover:opacity-90">Start free trial</a>
</article>
<article class="flex flex-col rounded-2xl border border-[var(--ws-pricing-card-border)] bg-[var(--ws-pricing-card-bg)] p-6">
<h3 class="text-lg font-semibold text-[var(--ws-pricing-text)]">Enterprise</h3>
<p class="mt-1 text-sm text-[var(--ws-pricing-text-muted)]">For regulated industries</p>
<p class="mt-5 text-3xl font-bold text-[var(--ws-pricing-text)]">Custom</p>
<ul class="mt-5 flex-1 space-y-2 text-sm text-[var(--ws-pricing-text-soft)]">
<li class="flex items-center gap-2"><svg class="h-4 w-4 shrink-0 text-[var(--ws-pricing-highlight-bg)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Custom CA hierarchy</li>
<li class="flex items-center gap-2"><svg class="h-4 w-4 shrink-0 text-[var(--ws-pricing-highlight-bg)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>HSM integration</li>
<li class="flex items-center gap-2"><svg class="h-4 w-4 shrink-0 text-[var(--ws-pricing-highlight-bg)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Compliance reporting (SOC 2, FIPS)</li>
</ul>
<a href="#" class="mt-6 block rounded-lg border border-[var(--ws-pricing-card-border)] py-2.5 text-center text-sm font-medium text-[var(--ws-pricing-text)] transition hover:border-[var(--ws-pricing-highlight-bg)]">Talk to sales</a>
</article>
</div>
</div>
<div id="product-panel-3" role="tabpanel" aria-labelledby="product-tab-3" class="ws-product-panel mt-10 hidden">
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-2 max-w-2xl mx-auto">
<article class="flex flex-col rounded-2xl border border-[var(--ws-pricing-card-border)] bg-[var(--ws-pricing-card-bg)] p-6">
<h3 class="text-lg font-semibold text-[var(--ws-pricing-text)]">Pro</h3>
<p class="mt-1 text-sm text-[var(--ws-pricing-text-muted)]">For engineering teams</p>
<p class="mt-5 text-3xl font-bold text-[var(--ws-pricing-text)]">$20<span class="text-sm font-medium text-[var(--ws-pricing-text-muted)]">/mo per 5 users</span></p>
<ul class="mt-5 flex-1 space-y-2 text-sm text-[var(--ws-pricing-text-soft)]">
<li class="flex items-center gap-2"><svg class="h-4 w-4 shrink-0 text-[var(--ws-pricing-highlight-bg)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Role-based access control</li>
<li class="flex items-center gap-2"><svg class="h-4 w-4 shrink-0 text-[var(--ws-pricing-highlight-bg)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Approval workflows</li>
<li class="flex items-center gap-2"><svg class="h-4 w-4 shrink-0 text-[var(--ws-pricing-highlight-bg)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Temporary access grants</li>
</ul>
<a href="#" class="mt-6 block rounded-lg bg-[var(--ws-pricing-highlight-bg)] py-2.5 text-center text-sm font-semibold text-white transition hover:opacity-90">Start free trial</a>
</article>
<article class="flex flex-col rounded-2xl border border-[var(--ws-pricing-card-border)] bg-[var(--ws-pricing-card-bg)] p-6">
<h3 class="text-lg font-semibold text-[var(--ws-pricing-text)]">Enterprise</h3>
<p class="mt-1 text-sm text-[var(--ws-pricing-text-muted)]">Custom governance policies</p>
<p class="mt-5 text-3xl font-bold text-[var(--ws-pricing-text)]">Custom</p>
<ul class="mt-5 flex-1 space-y-2 text-sm text-[var(--ws-pricing-text-soft)]">
<li class="flex items-center gap-2"><svg class="h-4 w-4 shrink-0 text-[var(--ws-pricing-highlight-bg)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Unlimited users</li>
<li class="flex items-center gap-2"><svg class="h-4 w-4 shrink-0 text-[var(--ws-pricing-highlight-bg)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Custom policy engine</li>
<li class="flex items-center gap-2"><svg class="h-4 w-4 shrink-0 text-[var(--ws-pricing-highlight-bg)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Dedicated CSM</li>
</ul>
<a href="#" class="mt-6 block rounded-lg border border-[var(--ws-pricing-card-border)] py-2.5 text-center text-sm font-medium text-[var(--ws-pricing-text)] transition hover:border-[var(--ws-pricing-highlight-bg)]">Talk to sales</a>
</article>
</div>
</div>
<div id="product-panel-4" role="tabpanel" aria-labelledby="product-tab-4" class="ws-product-panel mt-10 hidden">
<div class="mx-auto max-w-md rounded-2xl border border-[var(--ws-pricing-card-border)] bg-[var(--ws-pricing-card-bg)] p-8 text-center">
<span class="inline-flex items-center gap-2 rounded-full bg-amber-100 px-3 py-1 text-xs font-semibold text-amber-700">Coming soon</span>
<h3 class="mt-4 text-xl font-bold text-[var(--ws-pricing-text)]">Secret Scanning</h3>
<p class="mt-3 text-[var(--ws-pricing-text-soft)]">Automatically detect leaked secrets across your git history, CI pipelines, and container images. Join the waitlist to get early access.</p>
<a href="#" class="mt-6 inline-block rounded-lg bg-[var(--ws-pricing-highlight-bg)] px-6 py-2.5 text-sm font-semibold text-white transition hover:opacity-90">Join waitlist</a>
</div>
</div>
</div>
<script>
const tabs = document.querySelectorAll('.ws-product-tab');
const panels = document.querySelectorAll('.ws-product-panel');
tabs.forEach((tab) => {
tab.addEventListener('click', () => {
const target = tab.dataset.product;
tabs.forEach((t) => { t.setAttribute('aria-selected', 'false'); t.removeAttribute('data-active'); });
panels.forEach((p) => p.classList.add('hidden'));
tab.setAttribute('aria-selected', 'true');
tab.setAttribute('data-active', '');
const panel = document.getElementById('product-panel-' + target);
if (panel) panel.classList.remove('hidden');
});
});
</script>
</section>
Details
Responsive Dark Mode Tailwind Only Copy & Paste Requires JS
Stable Published
pricingmulti-producttabsselectorsaasplatformswitcher
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Section title and subtitle. |
| product-tabs | Yes | Pill-style tab buttons — one per product. |
| pricing-panels | Yes | Pricing card sets per product — each panel has its own tier structure. |
A pricing section for platforms with multiple distinct products. Horizontal pill tabs at the top let users select a product; the corresponding pricing cards appear below. Includes a “Coming soon” panel variant for unannounced modules. Inspired by infisical.com’s pricing page structure.