comparison pricing side-by-side features plans comparison pricing side-by-side features columns plans checkmarks side-by-side plan comparison two column feature comparison with checkmarks
Side-by-Side Comparison
Fetch pattern JSON:
curl https://webspire.de/patterns/comparison/side-by-side.json side-by-side.html
<section class="ws-comparison bg-[var(--ws-comparison-bg)] py-20">
<div class="mx-auto max-w-4xl 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">Choose your plan</h2>
<p class="mx-auto mt-4 max-w-xl text-lg text-[var(--ws-comparison-text-soft)]">Compare features side by side and pick what works for you.</p>
</div>
<div class="mt-12 grid gap-8 md:grid-cols-2">
<!-- Basic Plan -->
<div class="flex flex-col rounded-2xl border border-[var(--ws-comparison-border)] bg-[var(--ws-comparison-bg)] p-8">
<div class="mb-6">
<h3 class="text-xl font-semibold text-[var(--ws-comparison-text)]">Basic</h3>
<div class="mt-2 flex items-baseline gap-1">
<span class="text-4xl font-bold text-[var(--ws-comparison-text)]">$9</span>
<span class="text-sm text-[var(--ws-comparison-text-soft)]">/month</span>
</div>
<p class="mt-2 text-sm text-[var(--ws-comparison-text-soft)]">For individuals and small projects.</p>
</div>
<ul class="flex-1 space-y-4">
<li class="flex items-start gap-3">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-600" 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>
<span class="text-sm text-[var(--ws-comparison-text-soft)]">Up to 5 projects</span>
</li>
<li class="flex items-start gap-3">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-600" 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>
<span class="text-sm text-[var(--ws-comparison-text-soft)]">10 GB storage</span>
</li>
<li class="flex items-start gap-3">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-600" 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>
<span class="text-sm text-[var(--ws-comparison-text-soft)]">Basic analytics</span>
</li>
<li class="flex items-start gap-3">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-600" 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>
<span class="text-sm text-[var(--ws-comparison-text-soft)]">Email support</span>
</li>
<li class="flex items-start gap-3">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-[var(--ws-comparison-border)]" 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>
<span class="text-sm text-[var(--ws-comparison-text-soft)] opacity-60">Custom domain</span>
</li>
<li class="flex items-start gap-3">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-[var(--ws-comparison-border)]" 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>
<span class="text-sm text-[var(--ws-comparison-text-soft)] opacity-60">Priority support</span>
</li>
<li class="flex items-start gap-3">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-[var(--ws-comparison-border)]" 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>
<span class="text-sm text-[var(--ws-comparison-text-soft)] opacity-60">Advanced integrations</span>
</li>
</ul>
<a href="#" class="mt-8 block rounded-xl border border-[var(--ws-comparison-border)] px-6 py-3 text-center text-sm font-semibold text-[var(--ws-comparison-text)] transition hover:opacity-80">Get started</a>
</div>
<!-- Pro Plan (Recommended) -->
<div class="relative flex flex-col rounded-2xl border-2 border-[var(--ws-comparison-highlight)] bg-[var(--ws-comparison-bg)] p-8 shadow-lg">
<span class="absolute -top-3.5 left-1/2 -translate-x-1/2 rounded-full bg-[var(--ws-comparison-highlight)] px-4 py-1 text-xs font-semibold text-white">Recommended</span>
<div class="mb-6">
<h3 class="text-xl font-semibold text-[var(--ws-comparison-text)]">Pro</h3>
<div class="mt-2 flex items-baseline gap-1">
<span class="text-4xl font-bold text-[var(--ws-comparison-highlight)]">$29</span>
<span class="text-sm text-[var(--ws-comparison-text-soft)]">/month</span>
</div>
<p class="mt-2 text-sm text-[var(--ws-comparison-text-soft)]">For growing teams and businesses.</p>
</div>
<ul class="flex-1 space-y-4">
<li class="flex items-start gap-3">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-600" 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>
<span class="text-sm text-[var(--ws-comparison-text-soft)]">Unlimited projects</span>
</li>
<li class="flex items-start gap-3">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-600" 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>
<span class="text-sm text-[var(--ws-comparison-text-soft)]">100 GB storage</span>
</li>
<li class="flex items-start gap-3">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-600" 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>
<span class="text-sm text-[var(--ws-comparison-text-soft)]">Advanced analytics</span>
</li>
<li class="flex items-start gap-3">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-600" 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>
<span class="text-sm text-[var(--ws-comparison-text-soft)]">Priority support</span>
</li>
<li class="flex items-start gap-3">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-600" 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>
<span class="text-sm text-[var(--ws-comparison-text-soft)]">Custom domain</span>
</li>
<li class="flex items-start gap-3">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-600" 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>
<span class="text-sm text-[var(--ws-comparison-text-soft)]">Priority support</span>
</li>
<li class="flex items-start gap-3">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-600" 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>
<span class="text-sm text-[var(--ws-comparison-text-soft)]">Advanced integrations</span>
</li>
</ul>
<a href="#" class="mt-8 block rounded-xl bg-[var(--ws-comparison-highlight)] px-6 py-3 text-center text-sm font-semibold text-white transition hover:opacity-90">Upgrade to Pro</a>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
comparisonpricingside-by-sidefeaturesplans
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Section title and subtitle. |
| columns | Yes | Two plan columns with feature lists and check/cross indicators. |
| cta | Yes | CTA button at the bottom of each column. |
Two-column side-by-side plan comparison. Each column shows a plan name, price, feature checklist with checkmarks or crosses, and a CTA button. The right column (Pro) is highlighted with an indigo accent border and a “Recommended” badge. Responsive layout stacks vertically on mobile.