Pricing Cards

pricing section with three subscription plans

This tailwind example is contributed by JUGENDRA GANGWAR, on 04-Nov-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author JUGENDRA GANGWAR

Tailwind v3.4 2

Fork Fullscreen

<section data-pricing-component class="mx-auto w-full max-w-6xl px-5 py-12 sm:py-16">
  <div class="mx-auto max-w-2xl text-center">
    <span class="inline-flex rounded-full bg-indigo-50 px-4 py-2 text-xs font-bold uppercase tracking-wider text-indigo-600">Simple Pricing</span>
    <h2 class="mt-5 text-3xl font-bold tracking-tight text-slate-900 sm:text-5xl">Plans that grow with you.</h2>
    <p class="mt-4 text-sm leading-7 text-slate-500 sm:text-base">Choose the perfect plan to build, manage and grow your business.</p>
    <div class="mt-8 inline-flex items-center gap-4 rounded-2xl border border-slate-200 bg-white p-2 shadow-sm">
      <span data-monthly-label class="text-sm font-semibold text-indigo-600">Monthly</span>
      <button type="button" data-billing-toggle aria-label="Switch to yearly billing" aria-pressed="false" class="relative h-7 w-12 rounded-full bg-slate-200 transition-colors duration-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
        <span data-switch-knob class="absolute left-1 top-1 h-5 w-5 rounded-full bg-white shadow-sm transition-transform duration-300"></span>
      </button>
      <span data-yearly-label class="text-sm font-semibold text-slate-400">Yearly</span>
      <span class="rounded-full bg-emerald-50 px-2.5 py-1 text-[10px] font-bold text-emerald-700">SAVE 20%</span>
    </div>
  </div>

<div class="mt-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
    <article class="flex flex-col rounded-3xl border border-slate-200 bg-white p-7 shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-xl">
      <div>
        <div class="flex items-center justify-between">
          <h3 class="text-lg font-bold text-slate-900">Starter</h3>
          <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-500">Basic</span>
        </div>
        <p class="mt-2 text-sm leading-6 text-slate-500">Everything you need to get started.</p>
        <div class="mt-7 flex items-baseline gap-1">
          <span class="text-2xl font-semibold text-slate-900">$</span>
          <span data-price data-price-monthly="19" data-price-yearly="15" class="text-5xl font-bold tracking-tight text-slate-900">19</span>
          <span class="text-sm text-slate-400">/month</span>
        </div>
        <p data-billing-copy data-billing-monthly="Billed monthly" data-billing-yearly="$180 billed annually" class="mt-2 text-xs text-slate-400">Billed monthly</p>
      </div>
      <a href="#starter" class="mt-8 flex w-full items-center justify-center rounded-xl border border-slate-200 px-5 py-3.5 text-sm font-semibold text-slate-700 transition hover:border-indigo-600 hover:text-indigo-600">Get Started</a>
      <div class="my-7 border-t border-slate-100"></div>
      <p class="text-xs font-bold uppercase tracking-wider text-slate-400">What's included</p>
      <ul class="mt-5 space-y-4 text-sm text-slate-600">
        <li class="flex items-center gap-3"><span class="text-emerald-500">✓</span> Up to 3 projects</li>
        <li class="flex items-center gap-3"><span class="text-emerald-500">✓</span> Basic analytics</li>
        <li class="flex items-center gap-3"><span class="text-emerald-500">✓</span> 5 GB cloud storage</li>
        <li class="flex items-center gap-3"><span class="text-emerald-500">✓</span> Email support</li>
      </ul>
    </article>

<article class="relative flex flex-col rounded-3xl border-2 border-indigo-600 bg-white p-7 shadow-xl shadow-indigo-100/70 transition duration-300 hover:-translate-y-1">
      <span class="absolute -top-3 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-full bg-indigo-600 px-4 py-1.5 text-xs font-bold text-white shadow-lg shadow-indigo-200">MOST POPULAR</span>
      <div>
        <div class="flex items-center justify-between">
          <h3 class="text-lg font-bold text-slate-900">Professional</h3>
          <span class="rounded-full bg-indigo-50 px-3 py-1 text-xs font-semibold text-indigo-600">Popular</span>
        </div>
        <p class="mt-2 text-sm leading-6 text-slate-500">Advanced tools for growing teams.</p>
        <div class="mt-7 flex items-baseline gap-1">
          <span class="text-2xl font-semibold text-slate-900">$</span>
          <span data-price data-price-monthly="49" data-price-yearly="39" class="text-5xl font-bold tracking-tight text-slate-900">49</span>
          <span class="text-sm text-slate-400">/month</span>
        </div>
        <p data-billing-copy data-billing-monthly="Billed monthly" data-billing-yearly="$468 billed annually" class="mt-2 text-xs text-slate-400">Billed monthly</p>
      </div>
      <a href="#professional" class="mt-8 flex w-full items-center justify-center rounded-xl bg-indigo-600 px-5 py-3.5 text-sm font-semibold text-white shadow-lg shadow-indigo-200 transition hover:bg-indigo-700">Choose Professional ↗</a>
      <div class="my-7 border-t border-slate-100"></div>
      <p class="text-xs font-bold uppercase tracking-wider text-slate-400">Everything in Starter, plus</p>
      <ul class="mt-5 space-y-4 text-sm text-slate-600">
        <li class="flex items-center gap-3"><span class="text-emerald-500">✓</span> Unlimited projects</li>
        <li class="flex items-center gap-3"><span class="text-emerald-500">✓</span> Advanced analytics</li>
        <li class="flex items-center gap-3"><span class="text-emerald-500">✓</span> 50 GB cloud storage</li>
        <li class="flex items-center gap-3"><span class="text-emerald-500">✓</span> Priority support</li>
        <li class="flex items-center gap-3"><span class="text-emerald-500">✓</span> Team collaboration</li>
      </ul>
    </article>

<article class="flex flex-col rounded-3xl border border-slate-200 bg-white p-7 shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-xl md:col-span-2 lg:col-span-1">
      <div>
        <div class="flex items-center justify-between">
          <h3 class="text-lg font-bold text-slate-900">Enterprise</h3>
          <span class="rounded-full bg-amber-50 px-3 py-1 text-xs font-semibold text-amber-700">Advanced</span>
        </div>
        <p class="mt-2 text-sm leading-6 text-slate-500">Complete flexibility for larger businesses.</p>
        <div class="mt-7 flex items-baseline gap-1">
          <span class="text-2xl font-semibold text-slate-900">$</span>
          <span data-price data-price-monthly="99" data-price-yearly="79" class="text-5xl font-bold tracking-tight text-slate-900">99</span>
          <span class="text-sm text-slate-400">/month</span>
        </div>
        <p data-billing-copy data-billing-monthly="Billed monthly" data-billing-yearly="$948 billed annually" class="mt-2 text-xs text-slate-400">Billed monthly</p>
      </div>
      <a href="#enterprise" class="mt-8 flex w-full items-center justify-center rounded-xl border border-slate-200 px-5 py-3.5 text-sm font-semibold text-slate-700 transition hover:border-indigo-600 hover:text-indigo-600">Contact Sales</a>
      <div class="my-7 border-t border-slate-100"></div>
      <p class="text-xs font-bold uppercase tracking-wider text-slate-400">Everything in Professional, plus</p>
      <ul class="mt-5 space-y-4 text-sm text-slate-600">
        <li class="flex items-center gap-3"><span class="text-emerald-500">✓</span> Unlimited team members</li>
        <li class="flex items-center gap-3"><span class="text-emerald-500">✓</span> Unlimited storage</li>
        <li class="flex items-center gap-3"><span class="text-emerald-500">✓</span> Advanced security</li>
        <li class="flex items-center gap-3"><span class="text-emerald-500">✓</span> Dedicated account manager</li>
        <li class="flex items-center gap-3"><span class="text-emerald-500">✓</span> Custom integrations</li>
      </ul>
    </article>
  </div>

<p class="mt-8 text-center text-xs text-slate-400">All plans include secure access and regular product updates.</p>
</section>

Related Examples

Pricing Card with gradient background
A sleek and transparent card displaying your product's pricing. It's designed to be both visually appealing and informative, helping users understand your pricing options at a glance.

Computer guy

3 years ago

8.8k
3 pricing cards

Laurits

3 years ago

15.4k
multiple pricing cards
basic pricing card with single price

Amit Pachange

3 years ago

13.2k
Pricing table
pricing table for a software or service offering

Samuel Dawson

3 years ago

11.8k
Modern pricing cards
Minimal and clean pricing cards

Paul Intay

1 year ago

1.8k
Pricing table with 2 columns

Piet Vriend

3 years ago

13.5k
Pricing card
Reveal details on hover

Anonymous

2 years ago

5.4k
Pricing Plans UI
A modern, responsive pricing plan cards

EliteAI Tools

1 year ago

2k
Pricing comparison table
Showcase different pricing tiers or plans for a product or service.

Andreas Wagner

3 years ago

15.5k
Swiss-Grid Dark Pricing
A brutally minimalist pricing section that relies on strict grid architecture and typographic hierarchy instead of decorative elements. Features responsive border collapsing, monospaced technical accents, and high-performance CSS-only hover states. Designed for high-end SaaS, dev-tools, or agency portfolios that prioritize data clarity and structural rhythm.

Hamza Atig

10 months ago

827
Minimal pricing card design

Anonymous

3 years ago

8.2k
Pricing section with tailwind css

Task Master

3 years ago

12.3k