pricing comparison table plans features tiers pricing comparison table features plans tiers pricing feature comparison table plan comparison with checkmarks
Pricing Comparison
Fetch pattern JSON:
curl https://webspire.de/patterns/pricing/comparison.json comparison.html
<section class="ws-pricing bg-[var(--ws-pricing-bg)] py-20">
<div class="mx-auto max-w-5xl px-6">
<div class="mb-12 text-center">
<h2 class="text-3xl font-bold tracking-tight text-[var(--ws-pricing-text)] sm:text-4xl">Compare plans</h2>
<p class="mx-auto mt-4 max-w-xl text-lg text-[var(--ws-pricing-text-soft)]">Find the plan that fits your team.</p>
</div>
<div class="overflow-x-auto">
<table class="w-full text-sm">
<caption class="sr-only">Pricing plan feature comparison across Free, Pro, and Enterprise tiers</caption>
<thead>
<tr class="border-b border-[var(--ws-pricing-card-border)]">
<th scope="col" class="py-4 pr-4 text-left font-medium text-[var(--ws-pricing-text-muted)]">Feature</th>
<th scope="col" class="px-4 py-4 text-center font-semibold text-[var(--ws-pricing-text)]">Free</th>
<th scope="col" class="px-4 py-4 text-center font-semibold text-[var(--ws-pricing-highlight-bg)]">Pro</th>
<th scope="col" class="px-4 py-4 text-center font-semibold text-[var(--ws-pricing-text)]">Enterprise</th>
</tr>
<tr class="border-b border-[var(--ws-pricing-card-border)]">
<td class="py-3 pr-4"></td>
<td class="px-4 py-3 text-center">
<p class="text-2xl font-bold text-[var(--ws-pricing-text)]">$0</p>
<p class="text-xs text-[var(--ws-pricing-text-muted)]">forever</p>
</td>
<td class="px-4 py-3 text-center">
<p class="text-2xl font-bold text-[var(--ws-pricing-highlight-bg)]">$29</p>
<p class="text-xs text-[var(--ws-pricing-text-muted)]">per month</p>
</td>
<td class="px-4 py-3 text-center">
<p class="text-2xl font-bold text-[var(--ws-pricing-text)]">$99</p>
<p class="text-xs text-[var(--ws-pricing-text-muted)]">per month</p>
</td>
</tr>
</thead>
<tbody class="divide-y divide-[var(--ws-pricing-card-border)]">
<tr>
<td class="py-3.5 pr-4 text-[var(--ws-pricing-text-soft)]">Projects</td>
<td class="px-4 py-3.5 text-center text-[var(--ws-pricing-text-soft)]">3</td>
<td class="px-4 py-3.5 text-center text-[var(--ws-pricing-text-soft)]">Unlimited</td>
<td class="px-4 py-3.5 text-center text-[var(--ws-pricing-text-soft)]">Unlimited</td>
</tr>
<tr>
<td class="py-3.5 pr-4 text-[var(--ws-pricing-text-soft)]">Team members</td>
<td class="px-4 py-3.5 text-center text-[var(--ws-pricing-text-soft)]">1</td>
<td class="px-4 py-3.5 text-center text-[var(--ws-pricing-text-soft)]">10</td>
<td class="px-4 py-3.5 text-center text-[var(--ws-pricing-text-soft)]">Unlimited</td>
</tr>
<tr>
<td class="py-3.5 pr-4 text-[var(--ws-pricing-text-soft)]">API access</td>
<td class="px-4 py-3.5 text-center text-[var(--ws-pricing-text-muted)]">—</td>
<td class="px-4 py-3.5 text-center text-emerald-600">
<svg class="mx-auto h-5 w-5" 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="px-4 py-3.5 text-center text-emerald-600">
<svg class="mx-auto h-5 w-5" 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="py-3.5 pr-4 text-[var(--ws-pricing-text-soft)]">Custom domain</td>
<td class="px-4 py-3.5 text-center text-[var(--ws-pricing-text-muted)]">—</td>
<td class="px-4 py-3.5 text-center text-emerald-600">
<svg class="mx-auto h-5 w-5" 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="px-4 py-3.5 text-center text-emerald-600">
<svg class="mx-auto h-5 w-5" 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="py-3.5 pr-4 text-[var(--ws-pricing-text-soft)]">SSO / SAML</td>
<td class="px-4 py-3.5 text-center text-[var(--ws-pricing-text-muted)]">—</td>
<td class="px-4 py-3.5 text-center text-[var(--ws-pricing-text-muted)]">—</td>
<td class="px-4 py-3.5 text-center text-emerald-600">
<svg class="mx-auto h-5 w-5" 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="py-3.5 pr-4 text-[var(--ws-pricing-text-soft)]">Priority support</td>
<td class="px-4 py-3.5 text-center text-[var(--ws-pricing-text-muted)]">—</td>
<td class="px-4 py-3.5 text-center text-[var(--ws-pricing-text-muted)]">—</td>
<td class="px-4 py-3.5 text-center text-emerald-600">
<svg class="mx-auto h-5 w-5" 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 class="border-t border-[var(--ws-pricing-card-border)]">
<td class="pt-6 pr-4"></td>
<td class="px-4 pt-6 text-center"><a href="#" class="rounded-lg border border-[var(--ws-pricing-card-border)] px-4 py-2 text-sm font-medium text-[var(--ws-pricing-text)] transition hover:opacity-80">Get started</a></td>
<td class="px-4 pt-6 text-center"><a href="#" class="rounded-lg bg-[var(--ws-pricing-action-bg)] px-4 py-2 text-sm font-semibold text-[var(--ws-pricing-action-text)] transition hover:opacity-90">Upgrade to Pro</a></td>
<td class="px-4 pt-6 text-center"><a href="#" class="rounded-lg border border-[var(--ws-pricing-card-border)] px-4 py-2 text-sm font-medium text-[var(--ws-pricing-text)] transition hover:opacity-80">Contact sales</a></td>
</tr>
</tfoot>
</table>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
pricingcomparisontableplansfeaturestiers
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Section title and subtitle. |
| table | Yes | Comparison table with features and tier columns. |
Full comparison table with three tiers (Free, Pro, Enterprise). Features are listed as rows with text values, checkmarks (SVG), or dashes. The Pro column is highlighted with indigo color. Horizontally scrollable on mobile.