Pricing
Three-tier with highlight
Classic 3 plans, middle one featured
Classic 3 plans, middle one featured
Create a 3-column pricing section with Tailwind CSS. Each card has a plan name, price with /mo, a short description, a feature list with check icons, and a CTA button. Make the middle "Pro" card visually featured — dark background, a "Most popular" badge, and lifted with a ring/shadow. The outer cards are white with borders. Responsive: stack on mobile, three columns on lg.<section class="mx-auto max-w-6xl px-6 py-16">
<div class="mx-auto mb-12 max-w-xl text-center">
<h2 class="text-3xl font-semibold text-neutral-900">Simple, transparent pricing</h2>
<p class="mt-2 text-neutral-500">No hidden fees. Cancel anytime.</p>
</div>
<div class="grid gap-6 lg:grid-cols-3">
<!-- Starter -->
<div class="rounded-2xl border border-neutral-200 bg-white p-8">
<h3 class="font-medium text-neutral-900">Starter</h3>
<p class="mt-4"><span class="text-4xl font-semibold text-neutral-900">$0</span><span class="text-neutral-500">/mo</span></p>
<p class="mt-2 text-sm text-neutral-500">For individuals getting started.</p>
<button class="mt-6 w-full rounded-xl border border-neutral-200 py-2.5 text-sm font-medium text-neutral-900 hover:bg-neutral-50">Get started</button>
<ul class="mt-6 space-y-3 text-sm text-neutral-600">
<li class="flex gap-2"><span class="text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span> 1 project</li>
<li class="flex gap-2"><span class="text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span> Community support</li>
<li class="flex gap-2"><span class="text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span> 1 GB storage</li>
</ul>
</div>
<!-- Pro (featured) -->
<div class="relative rounded-2xl bg-neutral-900 p-8 shadow-xl ring-1 ring-neutral-900">
<span class="absolute right-6 top-6 rounded-full bg-white/10 px-3 py-1 text-xs font-medium text-white">Most popular</span>
<h3 class="font-medium text-white">Pro</h3>
<p class="mt-4"><span class="text-4xl font-semibold text-white">$24</span><span class="text-neutral-400">/mo</span></p>
<p class="mt-2 text-sm text-neutral-400">For growing teams that ship fast.</p>
<button class="mt-6 w-full rounded-xl bg-white py-2.5 text-sm font-medium text-neutral-900 hover:bg-neutral-100">Start free trial</button>
<ul class="mt-6 space-y-3 text-sm text-neutral-300">
<li class="flex gap-2"><span class="text-white"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span> Unlimited projects</li>
<li class="flex gap-2"><span class="text-white"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span> Priority support</li>
<li class="flex gap-2"><span class="text-white"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span> 100 GB storage</li>
<li class="flex gap-2"><span class="text-white"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span> Advanced analytics</li>
</ul>
</div>
<!-- Enterprise -->
<div class="rounded-2xl border border-neutral-200 bg-white p-8">
<h3 class="font-medium text-neutral-900">Enterprise</h3>
<p class="mt-4"><span class="text-4xl font-semibold text-neutral-900">Custom</span></p>
<p class="mt-2 text-sm text-neutral-500">For organizations at scale.</p>
<button class="mt-6 w-full rounded-xl border border-neutral-200 py-2.5 text-sm font-medium text-neutral-900 hover:bg-neutral-50">Contact sales</button>
<ul class="mt-6 space-y-3 text-sm text-neutral-600">
<li class="flex gap-2"><span class="text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span> SSO & SAML</li>
<li class="flex gap-2"><span class="text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span> Dedicated manager</li>
<li class="flex gap-2"><span class="text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span> Unlimited storage</li>
</ul>
</div>
</div>
</section>