pricing comparison table features plans matrix sticky pricing comparison table features matrix sticky checkmarks plans feature comparison pricing table plan matrix with sticky header
Pricing Comparison Table
Fetch pattern JSON:
curl https://webspire.de/patterns/pricing/comparison-table.json comparison-table.html
<section class="ws-pricing bg-[var(--ws-pricing-bg)] py-20">
<div class="mx-auto max-w-5xl 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)]">Compare plans</p>
<h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-pricing-text)] sm:text-4xl">Find the perfect fit</h2>
<p class="mt-4 text-base text-[var(--ws-pricing-text-soft)]">Every feature side by side. No surprises.</p>
</div>
<div class="mt-12 overflow-x-auto">
<table class="w-full min-w-[640px] border-collapse text-sm">
<!-- Sticky header -->
<thead class="sticky top-0 z-10">
<tr class="bg-[var(--ws-pricing-bg)]">
<th class="w-1/4 border-b border-[var(--ws-pricing-card-border)] py-4 text-left font-medium text-[var(--ws-pricing-text-muted)]">Features</th>
<th class="w-1/4 border-b border-[var(--ws-pricing-card-border)] py-4 text-center font-semibold text-[var(--ws-pricing-text)]">Starter</th>
<th class="w-1/4 border-b-2 border-[var(--ws-pricing-highlight-bg)] py-4 text-center font-semibold text-[var(--ws-pricing-highlight-bg)]">Pro</th>
<th class="w-1/4 border-b border-[var(--ws-pricing-card-border)] py-4 text-center font-semibold text-[var(--ws-pricing-text)]">Enterprise</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border-b border-[var(--ws-pricing-card-border)] py-3 text-[var(--ws-pricing-text)]">Projects</td>
<td class="border-b border-[var(--ws-pricing-card-border)] py-3 text-center text-[var(--ws-pricing-text-soft)]">5</td>
<td class="border-b border-[var(--ws-pricing-card-border)] py-3 text-center text-[var(--ws-pricing-text-soft)]">Unlimited</td>
<td class="border-b border-[var(--ws-pricing-card-border)] py-3 text-center text-[var(--ws-pricing-text-soft)]">Unlimited</td>
</tr>
<tr>
<td class="border-b border-[var(--ws-pricing-card-border)] py-3 text-[var(--ws-pricing-text)]">Team members</td>
<td class="border-b border-[var(--ws-pricing-card-border)] py-3 text-center text-[var(--ws-pricing-text-soft)]">1</td>
<td class="border-b border-[var(--ws-pricing-card-border)] py-3 text-center text-[var(--ws-pricing-text-soft)]">10</td>
<td class="border-b border-[var(--ws-pricing-card-border)] py-3 text-center text-[var(--ws-pricing-text-soft)]">Unlimited</td>
</tr>
<tr>
<td class="border-b border-[var(--ws-pricing-card-border)] py-3 text-[var(--ws-pricing-text)]">Analytics</td>
<td class="border-b border-[var(--ws-pricing-card-border)] py-3 text-center text-[var(--ws-pricing-text-soft)]">Basic</td>
<td class="border-b border-[var(--ws-pricing-card-border)] py-3 text-center text-[var(--ws-pricing-text-soft)]">Advanced</td>
<td class="border-b border-[var(--ws-pricing-card-border)] py-3 text-center text-[var(--ws-pricing-text-soft)]">Custom</td>
</tr>
<tr>
<td class="border-b border-[var(--ws-pricing-card-border)] py-3 text-[var(--ws-pricing-text)]">Custom branding</td>
<td class="border-b border-[var(--ws-pricing-card-border)] py-3 text-center">
<svg class="mx-auto h-4 w-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6"/></svg>
</td>
<td class="border-b border-[var(--ws-pricing-card-border)] py-3 text-center">
<svg class="mx-auto h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
</td>
<td class="border-b border-[var(--ws-pricing-card-border)] py-3 text-center">
<svg class="mx-auto h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
</td>
</tr>
<tr>
<td class="border-b border-[var(--ws-pricing-card-border)] py-3 text-[var(--ws-pricing-text)]">SSO / SAML</td>
<td class="border-b border-[var(--ws-pricing-card-border)] py-3 text-center">
<svg class="mx-auto h-4 w-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6"/></svg>
</td>
<td class="border-b border-[var(--ws-pricing-card-border)] py-3 text-center">
<svg class="mx-auto h-4 w-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6"/></svg>
</td>
<td class="border-b border-[var(--ws-pricing-card-border)] py-3 text-center">
<svg class="mx-auto h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
</td>
</tr>
<tr>
<td class="border-b border-[var(--ws-pricing-card-border)] py-3 text-[var(--ws-pricing-text)]">Priority support</td>
<td class="border-b border-[var(--ws-pricing-card-border)] py-3 text-center">
<svg class="mx-auto h-4 w-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6"/></svg>
</td>
<td class="border-b border-[var(--ws-pricing-card-border)] py-3 text-center">
<svg class="mx-auto h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
</td>
<td class="border-b border-[var(--ws-pricing-card-border)] py-3 text-center">
<svg class="mx-auto h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
</td>
</tr>
<tr>
<td class="border-b border-[var(--ws-pricing-card-border)] py-3 text-[var(--ws-pricing-text)]">SLA guarantee</td>
<td class="border-b border-[var(--ws-pricing-card-border)] py-3 text-center">
<svg class="mx-auto h-4 w-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6"/></svg>
</td>
<td class="border-b border-[var(--ws-pricing-card-border)] py-3 text-center">
<svg class="mx-auto h-4 w-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6"/></svg>
</td>
<td class="border-b border-[var(--ws-pricing-card-border)] py-3 text-center">
<svg class="mx-auto h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="pt-6"></td>
<td class="pt-6 text-center">
<a href="#" class="inline-block rounded-xl border border-[var(--ws-pricing-card-border)] px-5 py-2.5 text-sm font-semibold text-[var(--ws-pricing-text)] transition hover:opacity-80">Choose Starter</a>
</td>
<td class="pt-6 text-center">
<a href="#" class="inline-block rounded-xl bg-[var(--ws-pricing-action-bg)] px-5 py-2.5 text-sm font-semibold text-[var(--ws-pricing-action-text)] transition hover:opacity-90">Choose Pro</a>
</td>
<td class="pt-6 text-center">
<a href="#" class="inline-block rounded-xl border border-[var(--ws-pricing-card-border)] px-5 py-2.5 text-sm font-semibold text-[var(--ws-pricing-text)] transition hover:opacity-80">Choose Enterprise</a>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
pricingcomparisontablefeaturesplansmatrixsticky
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Section title and subtitle. |
| table | Yes | Comparison table with feature rows and plan columns. |
| actions | Yes | CTA buttons in table footer per plan. |
Full feature comparison table across three plans (Starter, Pro, Enterprise). Seven feature rows with text values, checkmarks (emerald), or dashes (gray). Pro column highlighted with colored border. Sticky header, horizontally scrollable on mobile, and “Choose Plan” CTA buttons in the footer.