comparison pricing feature-list plans sticky-header comparison features pricing sticky alternating plans tiers checklist feature list comparison with sticky header vertical plan comparison with alternating rows
Feature List Comparison
Fetch pattern JSON:
curl https://webspire.de/patterns/comparison/feature-list.json feature-list.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)]">Everything you need to pick the right plan for your team.</p>
</div>
<div class="mt-12 overflow-x-auto rounded-2xl border border-[var(--ws-comparison-border)] shadow-sm">
<table class="w-full min-w-[640px] text-sm">
<caption class="sr-only">Feature comparison across Free, Pro, and Enterprise plans</caption>
<thead class="sticky top-0 z-10">
<tr class="border-b border-[var(--ws-comparison-border)] bg-[var(--ws-comparison-bg)]">
<th scope="col" class="w-2/5 px-6 py-5 text-left font-medium text-[var(--ws-comparison-text-soft)]">Features</th>
<th scope="col" class="w-1/5 px-6 py-5 text-center">
<span class="block text-sm font-semibold text-[var(--ws-comparison-text)]">Free</span>
<span class="mt-1 block text-xs text-[var(--ws-comparison-text-soft)]">$0/mo</span>
</th>
<th scope="col" class="w-1/5 border-x border-[var(--ws-comparison-highlight)] bg-[var(--ws-comparison-highlight)]/10 px-6 py-5 text-center">
<span class="block text-sm font-semibold text-[var(--ws-comparison-highlight)]">Pro</span>
<span class="mt-1 block text-xs text-[var(--ws-comparison-highlight)]">$29/mo</span>
</th>
<th scope="col" class="w-1/5 px-6 py-5 text-center">
<span class="block text-sm font-semibold text-[var(--ws-comparison-text)]">Enterprise</span>
<span class="mt-1 block text-xs text-[var(--ws-comparison-text-soft)]">Custom</span>
</th>
</tr>
</thead>
<tbody>
<!-- Category: Core -->
<tr class="border-b border-[var(--ws-comparison-border)] bg-[var(--ws-comparison-bg)]">
<td colspan="4" class="px-6 py-3 text-xs font-semibold uppercase tracking-wider text-[var(--ws-comparison-text-soft)]">Core</td>
</tr>
<tr class="border-b border-[var(--ws-comparison-border)]">
<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 class="border-b border-[var(--ws-comparison-border)]">
<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 class="border-b border-[var(--ws-comparison-border)]">
<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)]">1 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)]">50 GB</td>
<td class="px-6 py-4 text-center text-[var(--ws-comparison-text-soft)]">Unlimited</td>
</tr>
<tr class="border-b border-[var(--ws-comparison-border)]">
<td class="px-6 py-4 font-medium text-[var(--ws-comparison-text)]">API requests</td>
<td class="px-6 py-4 text-center text-[var(--ws-comparison-text-soft)]">1K/mo</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)]">100K/mo</td>
<td class="px-6 py-4 text-center text-[var(--ws-comparison-text-soft)]">Unlimited</td>
</tr>
<!-- Category: Features -->
<tr class="border-b border-[var(--ws-comparison-border)] bg-[var(--ws-comparison-bg)]">
<td colspan="4" class="px-6 py-3 text-xs font-semibold uppercase tracking-wider text-[var(--ws-comparison-text-soft)]">Features</td>
</tr>
<tr class="border-b border-[var(--ws-comparison-border)]">
<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 class="border-b border-[var(--ws-comparison-border)]">
<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 class="border-b border-[var(--ws-comparison-border)]">
<td class="px-6 py-4 font-medium text-[var(--ws-comparison-text)]">Integrations</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)]">25</td>
<td class="px-6 py-4 text-center text-[var(--ws-comparison-text-soft)]">Unlimited</td>
</tr>
<tr class="border-b border-[var(--ws-comparison-border)]">
<td class="px-6 py-4 font-medium text-[var(--ws-comparison-text)]">Webhooks</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>
<!-- Category: Support & Security -->
<tr class="border-b border-[var(--ws-comparison-border)] bg-[var(--ws-comparison-bg)]">
<td colspan="4" class="px-6 py-3 text-xs font-semibold uppercase tracking-wider text-[var(--ws-comparison-text-soft)]">Support & Security</td>
</tr>
<tr class="border-b border-[var(--ws-comparison-border)]">
<td class="px-6 py-4 font-medium text-[var(--ws-comparison-text)]">Email support</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>
<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 class="border-b border-[var(--ws-comparison-border)]">
<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 class="border-b border-[var(--ws-comparison-border)]">
<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>
<tr class="border-b border-[var(--ws-comparison-border)]">
<td class="px-6 py-4 font-medium text-[var(--ws-comparison-text)]">Audit logs</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>
<tr>
<td class="px-6 py-4 font-medium text-[var(--ws-comparison-text)]">SLA guarantee</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-[var(--ws-comparison-text-soft)]">99.99%</td>
</tr>
</tbody>
<tfoot>
<tr class="border-t border-[var(--ws-comparison-border)] bg-[var(--ws-comparison-bg)]">
<td class="px-6 py-5"></td>
<td class="px-6 py-5 text-center">
<a href="#" class="inline-block rounded-lg border border-[var(--ws-comparison-border)] px-5 py-2.5 text-sm font-semibold text-[var(--ws-comparison-text)] transition hover:opacity-80">Get started</a>
</td>
<td class="border-x border-[var(--ws-comparison-highlight)] bg-[var(--ws-comparison-highlight)]/10 px-6 py-5 text-center">
<a href="#" class="inline-block rounded-lg bg-[var(--ws-comparison-highlight)] px-5 py-2.5 text-sm font-semibold text-white transition hover:opacity-90">Upgrade to Pro</a>
</td>
<td class="px-6 py-5 text-center">
<a href="#" class="inline-block rounded-lg border border-[var(--ws-comparison-border)] px-5 py-2.5 text-sm font-semibold text-[var(--ws-comparison-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
comparisonpricingfeature-listplanssticky-header
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Section title and subtitle. |
| header | Yes | Sticky header row with plan names and monthly prices. |
| feature-rows | Yes | Feature rows with alternating backgrounds, left-aligned names, and per-plan values. |
| footer | Yes | CTA buttons per plan. |
Vertical feature comparison list with a sticky header row showing plan names and prices. Feature rows use alternating backgrounds for readability. Left column shows feature names, right columns show values as text, checkmarks, or crosses for Free, Pro, and Enterprise tiers. Pro column is highlighted with an indigo accent. Responsive with horizontal scroll on mobile. Dark mode supported.