comparison pricing table features plans comparison pricing features table plans tiers checkmarks feature comparison table plan comparison with checkmarks
Feature Comparison
Fetch pattern JSON:
curl https://webspire.de/patterns/comparison/base.json base.html
<section class="ws-comparison bg-[var(--ws-comparison-bg)] py-20">
<div class="mx-auto max-w-5xl px-6">
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-3xl font-bold tracking-tight text-[var(--ws-comparison-text)] sm:text-4xl">Compare plans</h2>
<p class="mx-auto mt-4 max-w-xl text-lg text-[var(--ws-comparison-text-soft)]">See which plan is right for your team.</p>
</div>
<div class="mt-12 overflow-hidden rounded-2xl border border-[var(--ws-comparison-border)]">
<table class="w-full text-sm">
<caption class="sr-only">Feature comparison across Starter, Pro, and Enterprise plans</caption>
<thead>
<tr class="border-b border-[var(--ws-comparison-border)] bg-[var(--ws-comparison-bg)]">
<th scope="col" class="px-6 py-4 text-left font-medium text-[var(--ws-comparison-text-soft)]">Features</th>
<th scope="col" class="px-6 py-4 text-center font-semibold text-[var(--ws-comparison-text)]">Starter</th>
<th scope="col" class="border-x border-[var(--ws-comparison-highlight)] bg-[var(--ws-comparison-highlight)]/10 px-6 py-4 text-center font-semibold text-[var(--ws-comparison-highlight)]">Pro</th>
<th scope="col" class="px-6 py-4 text-center font-semibold text-[var(--ws-comparison-text)]">Enterprise</th>
</tr>
</thead>
<tbody class="divide-y divide-[var(--ws-comparison-border)]">
<tr>
<td class="px-6 py-4 font-medium text-[var(--ws-comparison-text)]">Projects</td>
<td class="px-6 py-4 text-center text-[var(--ws-comparison-text-soft)]">3</td>
<td class="border-x border-[var(--ws-comparison-highlight)]/30 bg-[var(--ws-comparison-highlight)]/5 px-6 py-4 text-center text-[var(--ws-comparison-text-soft)]">Unlimited</td>
<td class="px-6 py-4 text-center text-[var(--ws-comparison-text-soft)]">Unlimited</td>
</tr>
<tr>
<td class="px-6 py-4 font-medium text-[var(--ws-comparison-text)]">Team members</td>
<td class="px-6 py-4 text-center text-[var(--ws-comparison-text-soft)]">1</td>
<td class="border-x border-[var(--ws-comparison-highlight)]/30 bg-[var(--ws-comparison-highlight)]/5 px-6 py-4 text-center text-[var(--ws-comparison-text-soft)]">10</td>
<td class="px-6 py-4 text-center text-[var(--ws-comparison-text-soft)]">Unlimited</td>
</tr>
<tr>
<td class="px-6 py-4 font-medium text-[var(--ws-comparison-text)]">Storage</td>
<td class="px-6 py-4 text-center text-[var(--ws-comparison-text-soft)]">5 GB</td>
<td class="border-x border-[var(--ws-comparison-highlight)]/30 bg-[var(--ws-comparison-highlight)]/5 px-6 py-4 text-center text-[var(--ws-comparison-text-soft)]">100 GB</td>
<td class="px-6 py-4 text-center text-[var(--ws-comparison-text-soft)]">Unlimited</td>
</tr>
<tr>
<td class="px-6 py-4 font-medium text-[var(--ws-comparison-text)]">Custom domain</td>
<td class="px-6 py-4 text-center text-[var(--ws-comparison-text-soft)]">
<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="M6 18L18 6M6 6l12 12"/></svg>
</td>
<td class="border-x border-[var(--ws-comparison-highlight)]/30 bg-[var(--ws-comparison-highlight)]/5 px-6 py-4 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-6 py-4 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="px-6 py-4 font-medium text-[var(--ws-comparison-text)]">Analytics</td>
<td class="px-6 py-4 text-center text-[var(--ws-comparison-text-soft)]">Basic</td>
<td class="border-x border-[var(--ws-comparison-highlight)]/30 bg-[var(--ws-comparison-highlight)]/5 px-6 py-4 text-center text-[var(--ws-comparison-text-soft)]">Advanced</td>
<td class="px-6 py-4 text-center text-[var(--ws-comparison-text-soft)]">Custom</td>
</tr>
<tr>
<td class="px-6 py-4 font-medium text-[var(--ws-comparison-text)]">Priority support</td>
<td class="px-6 py-4 text-center text-[var(--ws-comparison-text-soft)]">
<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="M6 18L18 6M6 6l12 12"/></svg>
</td>
<td class="border-x border-[var(--ws-comparison-highlight)]/30 bg-[var(--ws-comparison-highlight)]/5 px-6 py-4 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-6 py-4 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="px-6 py-4 font-medium text-[var(--ws-comparison-text)]">SSO / SAML</td>
<td class="px-6 py-4 text-center text-[var(--ws-comparison-text-soft)]">
<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="M6 18L18 6M6 6l12 12"/></svg>
</td>
<td class="border-x border-[var(--ws-comparison-highlight)]/30 bg-[var(--ws-comparison-highlight)]/5 px-6 py-4 text-center text-[var(--ws-comparison-text-soft)]">
<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="M6 18L18 6M6 6l12 12"/></svg>
</td>
<td class="px-6 py-4 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-comparison-border)] bg-[var(--ws-comparison-bg)]">
<td class="px-6 py-4 font-medium text-[var(--ws-comparison-text)]">Price</td>
<td class="px-6 py-4 text-center">
<span class="text-lg font-bold text-[var(--ws-comparison-text)]">Free</span>
<a href="#" class="mt-2 block text-sm font-semibold text-[var(--ws-comparison-highlight)]">Get started</a>
</td>
<td class="border-x border-[var(--ws-comparison-highlight)] bg-[var(--ws-comparison-highlight)]/10 px-6 py-4 text-center">
<span class="text-lg font-bold text-[var(--ws-comparison-highlight)]">$29/mo</span>
<a href="#" class="mt-2 block rounded-lg bg-[var(--ws-comparison-highlight)] px-4 py-2 text-sm font-semibold text-white transition hover:opacity-90">Upgrade to Pro</a>
</td>
<td class="px-6 py-4 text-center">
<span class="text-lg font-bold text-[var(--ws-comparison-text)]">Custom</span>
<a href="#" class="mt-2 block text-sm font-semibold text-[var(--ws-comparison-highlight)]">Contact sales</a>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
comparisonpricingtablefeaturesplans
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Section title and subtitle. |
| table | Yes | Feature rows with plan columns and check/cross indicators. |
| footer | Yes | Price row with CTA buttons per plan. |
Three-tier feature comparison table. Rows show feature names with values, checkmarks, or crosses per plan. The middle column (Pro) is highlighted with an indigo accent. Footer row shows price and CTA per plan. Fully responsive with horizontal scroll on mobile.