Pricing Sections

14 components. Change theme and colors above each preview, then copy the code below.

Theme & colors

Apply to all previews below.

Theme

Primary

Custom

Accent

Custom

Three tiers

Pricing section variant 1. Copy the code and use anywhere.

Pricing

Plans for every team

Starter

$0/month

For individuals and small projects.

Get started

Pro

$29/month

For growing teams.

Get started

Enterprise

$99/month

For large organizations.

Get started

Code

<section class="bg-white py-24 dark:bg-gray-950 sm:py-32">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="mx-auto max-w-4xl text-center">
      <h2 class="text-base font-semibold leading-7 text-indigo-600 dark:text-indigo-400">Pricing</h2>
      <p class="mt-2 text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-5xl">Plans for every team</p>
    </div>
    <div class="mx-auto mt-16 grid max-w-5xl grid-cols-1 gap-8 sm:grid-cols-3">
      <div class="rounded-2xl border border-gray-200 bg-white p-8 dark:border-gray-700 dark:bg-gray-900 transition-shadow duration-200 hover:shadow-lg">
        <h3 class="text-base font-semibold leading-7 text-gray-900 dark:text-white">Starter</h3>
        <p class="mt-4 flex items-baseline gap-x-2"><span class="text-4xl font-bold tracking-tight text-gray-900 dark:text-white">$0</span><span class="text-sm text-gray-500 dark:text-gray-400">/month</span></p>
        <p class="mt-6 text-sm leading-6 text-gray-600 dark:text-gray-300">For individuals and small projects.</p>
        <a href="#" class="mt-8 block rounded-full border border-gray-900 px-3.5 py-2 text-center text-sm font-semibold text-gray-900 hover:bg-gray-900 hover:text-white dark:border-white dark:text-white dark:hover:bg-white dark:hover:text-gray-900 transition-colors duration-200">Get started</a>
      </div>
      <div class="rounded-2xl border border-gray-200 bg-white p-8 dark:border-gray-700 dark:bg-gray-900 transition-shadow duration-200 hover:shadow-lg">
        <h3 class="text-base font-semibold leading-7 text-gray-900 dark:text-white">Pro</h3>
        <p class="mt-4 flex items-baseline gap-x-2"><span class="text-4xl font-bold tracking-tight text-gray-900 dark:text-white">$29</span><span class="text-sm text-gray-500 dark:text-gray-400">/month</span></p>
        <p class="mt-6 text-sm leading-6 text-gray-600 dark:text-gray-300">For growing teams.</p>
        <a href="#" class="mt-8 block rounded-full bg-gray-900 px-3.5 py-2 text-center text-sm font-semibold text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100 transition-colors duration-200">Get started</a>
      </div>
      <div class="rounded-2xl border border-gray-200 bg-white p-8 dark:border-gray-700 dark:bg-gray-900 transition-shadow duration-200 hover:shadow-lg">
        <h3 class="text-base font-semibold leading-7 text-gray-900 dark:text-white">Enterprise</h3>
        <p class="mt-4 flex items-baseline gap-x-2"><span class="text-4xl font-bold tracking-tight text-gray-900 dark:text-white">$99</span><span class="text-sm text-gray-500 dark:text-gray-400">/month</span></p>
        <p class="mt-6 text-sm leading-6 text-gray-600 dark:text-gray-300">For large organizations.</p>
        <a href="#" class="mt-8 block rounded-full border border-gray-900 px-3.5 py-2 text-center text-sm font-semibold text-gray-900 hover:bg-gray-900 hover:text-white dark:border-white dark:text-white dark:hover:bg-white dark:hover:text-gray-900 transition-colors duration-200">Get started</a>
      </div>
    </div>
  </div>
</section>

Toggle annual

Pricing section variant 2. Copy the code and use anywhere.

Pricing

Monthly Annual Save 20%

Pro

$29$279/mo

Get started

Enterprise

$99$950/mo

Get started

Code

<section class="pricing-toggle-2 bg-white dark:bg-gray-950 py-24">
  <div class="mx-auto max-w-4xl px-6 text-center">
    <h2 class="text-3xl font-bold text-gray-900 dark:text-white">Pricing</h2>
    <div class="mt-6 flex items-center justify-center gap-3">
      <span class="pricing-label-monthly text-sm text-gray-500 dark:text-gray-400">Monthly</span>
      <button type="button" class="pricing-toggle-btn relative h-6 w-11 rounded-full bg-gray-200 dark:bg-gray-700 transition-colors duration-200 aria-pressed="false" aria-label="Toggle annual" data-state="monthly">
        <span class="pricing-toggle-knob absolute left-1 top-1 h-4 w-4 rounded-full bg-white shadow transition-transform duration-200 ease-out translate-x-0" />
      </button>
      <span class="text-sm font-medium text-gray-900 dark:text-white">Annual <span class="pricing-save-badge text-indigo-600 dark:text-indigo-400 opacity-0 transition-opacity duration-200">Save 20%</span></span>
    </div>
    <div class="mt-12 grid gap-8 sm:grid-cols-2">
      <div class="rounded-2xl border border-gray-200 p-8 dark:border-gray-700 dark:bg-gray-900">
        <h3 class="font-semibold text-gray-900 dark:text-white">Pro</h3>
        <p class="mt-4 text-3xl font-bold text-gray-900 dark:text-white">
          <span class="pricing-monthly" data-monthly>$29</span><span class="pricing-annual hidden" data-annual>$279</span><span class="text-base font-normal text-gray-500 dark:text-gray-400">/mo</span>
        </p>
        <a href="#" class="mt-6 block rounded-full border border-gray-900 py-2.5 text-center text-sm font-semibold text-gray-900 hover:bg-gray-900 hover:text-white dark:border-white dark:text-white dark:hover:bg-white dark:hover:text-gray-900 transition-colors duration-200">Get started</a>
      </div>
      <div class="rounded-2xl border-2 border-indigo-600 p-8 dark:border-indigo-500">
        <h3 class="font-semibold text-gray-900 dark:text-white">Enterprise</h3>
        <p class="mt-4 text-3xl font-bold text-gray-900 dark:text-white">
          <span class="pricing-monthly" data-monthly>$99</span><span class="pricing-annual hidden" data-annual>$950</span><span class="text-base font-normal text-gray-500 dark:text-gray-400">/mo</span>
        </p>
        <a href="#" class="mt-6 block rounded-full bg-indigo-600 py-2.5 text-center text-sm font-semibold text-white hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400 transition-colors duration-200">Get started</a>
      </div>
    </div>
  </div>
</section>
<script>
  (function () {
    const section = document.querySelector('.pricing-toggle-2');
    if (!section) return;
    const btn = section.querySelector('.pricing-toggle-btn');
    const knob = section.querySelector('.pricing-toggle-knob');
    const monthlyEls = section.querySelectorAll('.pricing-monthly');
    const annualEls = section.querySelectorAll('.pricing-annual');
    const saveBadge = section.querySelector('.pricing-save-badge');
    if (!btn || !knob) return;

    function setAnnual(annual) {
      const isAnnual = !!annual;
      btn.setAttribute('data-state', isAnnual ? 'annual' : 'monthly');
      btn.setAttribute('aria-pressed', String(isAnnual));
      if (knob) knob.style.transform = isAnnual ? 'translateX(1.25rem)' : 'translateX(0)';
      monthlyEls.forEach(function (el) { el.classList.toggle('hidden', isAnnual); });
      annualEls.forEach(function (el) { el.classList.toggle('hidden', !isAnnual); });
      if (saveBadge) saveBadge.classList.toggle('opacity-0', !isAnnual);
    }

    btn.addEventListener('click', function () {
      setAnnual(btn.getAttribute('data-state') !== 'annual');
    });
    setAnnual(false);
  })();
</script>

Feature comparison

Pricing section variant 3. Copy the code and use anywhere.

Compare plans

Feature	Starter	Pro	Enterprise
Users	1	10	Unlimited
Storage	5 GB	50 GB	Unlimited
Support	Email	Priority	24/7

Code

<section class="bg-white dark:bg-gray-950 py-24">
  <div class="mx-auto max-w-7xl px-6">
    <h2 class="text-center text-3xl font-bold text-gray-900 dark:text-white">Compare plans</h2>
    <div class="mt-12 overflow-x-auto">
      <table class="w-full min-w-[600px] border-collapse text-left">
        <thead>
          <tr class="border-b border-gray-200 dark:border-gray-700">
            <th class="pb-4 font-semibold text-gray-900 dark:text-white">Feature</th>
            <th class="pb-4 font-semibold text-gray-900 dark:text-white">Starter</th>
            <th class="pb-4 font-semibold text-gray-900 dark:text-white">Pro</th>
            <th class="pb-4 font-semibold text-gray-900 dark:text-white">Enterprise</th>
          </tr>
        </thead>
        <tbody class="text-gray-600 dark:text-gray-300">
          <tr class="border-b border-gray-100 dark:border-gray-800"><td class="py-3">Users</td><td>1</td><td>10</td><td>Unlimited</td></tr>
          <tr class="border-b border-gray-100 dark:border-gray-800"><td class="py-3">Storage</td><td>5 GB</td><td>50 GB</td><td>Unlimited</td></tr>
          <tr class="border-b border-gray-100 dark:border-gray-800"><td class="py-3">Support</td><td>Email</td><td>Priority</td><td>24/7</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</section>

Single highlighted

Pricing section variant 4. Copy the code and use anywhere.

Simple pricing

Pro

$29/month

Everything you need to ship and scale.

Get started

Code

<section class="bg-gray-50 dark:bg-gray-900/50 py-24">
  <div class="mx-auto max-w-lg px-6 text-center">
    <h2 class="text-3xl font-bold text-gray-900 dark:text-white">Simple pricing</h2>
    <div class="mt-8 rounded-2xl border-2 border-indigo-600 bg-white p-10 dark:border-indigo-500 dark:bg-gray-900">
      <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Pro</h3>
      <p class="mt-4 text-4xl font-bold text-gray-900 dark:text-white">$29<span class="text-lg font-normal text-gray-500 dark:text-gray-400">/month</span></p>
      <p class="mt-4 text-gray-600 dark:text-gray-300">Everything you need to ship and scale.</p>
      <a href="#" class="mt-8 block rounded-full bg-indigo-600 py-3 text-center font-semibold text-white hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400">Get started</a>
    </div>
  </div>
</section>

Cards with checkmarks

Pricing section variant 5. Copy the code and use anywhere.

Starter

✓ 5 projects
✓ 1 GB storage
✓ Email support

Get started

Pro

$29

✓ Unlimited projects
✓ 50 GB storage
✓ Priority support

Get started

Enterprise

$99

✓ Everything in Pro
✓ Unlimited storage
✓ 24/7 support

Get started

Code

<section class="bg-white dark:bg-gray-950 py-24">
  <div class="mx-auto max-w-7xl px-6">
    <div class="grid gap-8 lg:grid-cols-3">
      <div class="rounded-2xl border border-gray-200 p-8 dark:border-gray-700 dark:bg-gray-900">
        <h3 class="font-semibold text-gray-900 dark:text-white">Starter</h3>
        <p class="mt-2 text-3xl font-bold text-gray-900 dark:text-white">$0</p>
        <ul class="mt-6 space-y-3 text-sm text-gray-600 dark:text-gray-300">
          <li class="flex gap-2">✓ 5 projects</li>
          <li class="flex gap-2">✓ 1 GB storage</li>
          <li class="flex gap-2">✓ Email support</li>
        </ul>
        <a href="#" class="mt-8 block rounded-full border border-gray-900 py-2.5 text-center text-sm font-semibold text-gray-900 hover:bg-gray-900 hover:text-white dark:border-white dark:text-white dark:hover:bg-white dark:hover:text-gray-900">Get started</a>
      </div>
      <div class="rounded-2xl border border-gray-200 p-8 dark:border-gray-700 dark:bg-gray-900">
        <h3 class="font-semibold text-gray-900 dark:text-white">Pro</h3>
        <p class="mt-2 text-3xl font-bold text-gray-900 dark:text-white">$29</p>
        <ul class="mt-6 space-y-3 text-sm text-gray-600 dark:text-gray-300">
          <li class="flex gap-2">✓ Unlimited projects</li>
          <li class="flex gap-2">✓ 50 GB storage</li>
          <li class="flex gap-2">✓ Priority support</li>
        </ul>
        <a href="#" class="mt-8 block rounded-full bg-gray-900 py-2.5 text-center text-sm font-semibold text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100">Get started</a>
      </div>
      <div class="rounded-2xl border border-gray-200 p-8 dark:border-gray-700 dark:bg-gray-900">
        <h3 class="font-semibold text-gray-900 dark:text-white">Enterprise</h3>
        <p class="mt-2 text-3xl font-bold text-gray-900 dark:text-white">$99</p>
        <ul class="mt-6 space-y-3 text-sm text-gray-600 dark:text-gray-300">
          <li class="flex gap-2">✓ Everything in Pro</li>
          <li class="flex gap-2">✓ Unlimited storage</li>
          <li class="flex gap-2">✓ 24/7 support</li>
        </ul>
        <a href="#" class="mt-8 block rounded-full border border-gray-900 py-2.5 text-center text-sm font-semibold text-gray-900 hover:bg-gray-900 hover:text-white dark:border-white dark:text-white dark:hover:bg-white dark:hover:text-gray-900">Get started</a>
      </div>
    </div>
  </div>
</section>

Minimal table

Pricing section variant 6. Copy the code and use anywhere.

Pricing

Starter

For individuals

$0 Get started

Pro

For teams

$29 Get started

Code

<section class="py-24">
  <div class="mx-auto max-w-2xl px-6">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Pricing</h2>
    <div class="mt-8 space-y-6">
      <div class="flex items-center justify-between border-b border-gray-200 py-4 dark:border-gray-700">
        <div>
          <p class="font-medium text-gray-900 dark:text-white">Starter</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">For individuals</p>
        </div>
        <div class="flex items-center gap-4">
          <span class="text-xl font-bold text-gray-900 dark:text-white">$0</span>
          <a href="#" class="text-sm font-semibold text-indigo-600 dark:text-indigo-400">Get started</a>
        </div>
      </div>
      <div class="flex items-center justify-between border-b border-gray-200 py-4 dark:border-gray-700">
        <div>
          <p class="font-medium text-gray-900 dark:text-white">Pro</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">For teams</p>
        </div>
        <div class="flex items-center gap-4">
          <span class="text-xl font-bold text-gray-900 dark:text-white">$29</span>
          <a href="#" class="text-sm font-semibold text-indigo-600 dark:text-indigo-400">Get started</a>
        </div>
      </div>
    </div>
  </div>
</section>

With FAQ

Pricing section variant 7. Copy the code and use anywhere.

Pricing

Simple, transparent pricing. No hidden fees.

Pro — $29/mo

Get started

Questions?

See our FAQ or contact support.

Code

<section class="bg-white dark:bg-gray-950 py-24">
  <div class="mx-auto max-w-4xl px-6">
    <h2 class="text-center text-3xl font-bold text-gray-900 dark:text-white">Pricing</h2>
    <p class="mt-4 text-center text-gray-600 dark:text-gray-300">Simple, transparent pricing. No hidden fees.</p>
    <div class="mt-12 flex justify-center">
      <div class="rounded-2xl border border-gray-200 bg-white p-8 dark:border-gray-700 dark:bg-gray-900">
        <h3 class="font-semibold text-gray-900 dark:text-white">Pro — $29/mo</h3>
        <a href="#" class="mt-6 block rounded-full bg-gray-900 py-2.5 text-center text-sm font-semibold text-white dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100">Get started</a>
      </div>
    </div>
    <div class="mt-16 border-t border-gray-200 pt-16 dark:border-gray-700">
      <h3 class="font-semibold text-gray-900 dark:text-white">Questions?</h3>
      <p class="mt-2 text-gray-600 dark:text-gray-300">See our FAQ or contact support.</p>
    </div>
  </div>
</section>

Side-by-side

Pricing section variant 8. Copy the code and use anywhere.

Monthly

$29/mo

Get started

Save 20%

Annual

$279/yr

Get started

Code

<section class="bg-gray-50 dark:bg-gray-900/50 py-24">
  <div class="mx-auto max-w-5xl px-6 lg:grid lg:grid-cols-2 lg:gap-12">
    <div class="rounded-2xl border border-gray-200 bg-white p-10 dark:border-gray-700 dark:bg-gray-900">
      <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Monthly</h3>
      <p class="mt-4 text-4xl font-bold text-gray-900 dark:text-white">$29<span class="text-base font-normal text-gray-500 dark:text-gray-400">/mo</span></p>
      <a href="#" class="mt-8 block rounded-full bg-gray-900 py-2.5 text-center text-sm font-semibold text-white dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100">Get started</a>
    </div>
    <div class="mt-8 rounded-2xl border-2 border-indigo-600 bg-white p-10 dark:mt-0 dark:border-indigo-500 dark:bg-gray-900">
      <span class="text-sm font-medium text-indigo-600 dark:text-indigo-400">Save 20%</span>
      <h3 class="mt-2 text-xl font-semibold text-gray-900 dark:text-white">Annual</h3>
      <p class="mt-4 text-4xl font-bold text-gray-900 dark:text-white">$279<span class="text-base font-normal text-gray-500 dark:text-gray-400">/yr</span></p>
      <a href="#" class="mt-8 block rounded-full bg-indigo-600 py-2.5 text-center text-sm font-semibold text-white hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400">Get started</a>
    </div>
  </div>
</section>

Centered single

Pricing section variant 9. Copy the code and use anywhere.

One plan. Simple.

$29/mo

Everything included. No limits.

Get started

Code

<section class="py-24">
  <div class="mx-auto max-w-md px-6 text-center">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white">One plan. Simple.</h2>
    <p class="mt-4 text-5xl font-bold text-gray-900 dark:text-white">$29<span class="text-2xl font-normal text-gray-500 dark:text-gray-400">/mo</span></p>
    <p class="mt-6 text-gray-600 dark:text-gray-300">Everything included. No limits.</p>
    <a href="#" class="mt-8 inline-block w-full rounded-full bg-gray-900 py-3 font-semibold text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100">Get started</a>
  </div>
</section>

With badge

Pricing section variant 10. Copy the code and use anywhere.

Pro plan

$29/month

Get started

Code

<section class="bg-white dark:bg-gray-950 py-24">
  <div class="mx-auto max-w-4xl px-6">
    <div class="rounded-2xl border border-gray-200 bg-gray-50 p-10 text-center dark:border-gray-700 dark:bg-gray-900">
      <span class="inline-block rounded-full bg-indigo-100 px-3 py-1 text-sm font-medium text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300">Most popular</span>
      <h2 class="mt-4 text-2xl font-bold text-gray-900 dark:text-white">Pro plan</h2>
      <p class="mt-2 text-4xl font-bold text-gray-900 dark:text-white">$29<span class="text-lg font-normal text-gray-500 dark:text-gray-400">/month</span></p>
      <a href="#" class="mt-8 inline-block rounded-full bg-indigo-600 px-6 py-2.5 text-sm font-semibold text-white hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400">Get started</a>
    </div>
  </div>
</section>

Enterprise focus

Pricing section variant 11. Copy the code and use anywhere.

Enterprise

For large teams and organizations. Custom pricing.

Contact sales

Code

<section class="bg-gray-900 dark:bg-gray-950 py-24">
  <div class="mx-auto max-w-2xl px-6 text-center">
    <h2 class="text-3xl font-bold text-white">Enterprise</h2>
    <p class="mt-4 text-lg text-gray-300">For large teams and organizations. Custom pricing.</p>
    <a href="#" class="mt-8 inline-block rounded-full bg-white px-6 py-2.5 text-sm font-semibold text-gray-900 hover:bg-gray-100">Contact sales</a>
  </div>
</section>

Simple two-tier

Pricing section variant 12. Copy the code and use anywhere.

Free

Get started

Pro

$29

Get started

Code

<section class="bg-white dark:bg-gray-950 py-24">
  <div class="mx-auto max-w-3xl px-6">
    <div class="grid gap-8 sm:grid-cols-2">
      <div class="rounded-xl border border-gray-200 p-8 dark:border-gray-700 dark:bg-gray-900">
        <h3 class="font-semibold text-gray-900 dark:text-white">Free</h3>
        <p class="mt-2 text-2xl font-bold text-gray-900 dark:text-white">$0</p>
        <a href="#" class="mt-6 block rounded-full border border-gray-900 py-2 text-center text-sm font-semibold text-gray-900 hover:bg-gray-900 hover:text-white dark:border-white dark:text-white dark:hover:bg-white dark:hover:text-gray-900">Get started</a>
      </div>
      <div class="rounded-xl border border-gray-200 p-8 dark:border-gray-700 dark:bg-gray-900">
        <h3 class="font-semibold text-gray-900 dark:text-white">Pro</h3>
        <p class="mt-2 text-2xl font-bold text-gray-900 dark:text-white">$29</p>
        <a href="#" class="mt-6 block rounded-full bg-gray-900 py-2 text-center text-sm font-semibold text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100">Get started</a>
      </div>
    </div>
  </div>
</section>

Single plan highlight

Pricing section variant 13. Copy the code and use anywhere.

One simple plan

Pro

$49/month

Everything you need. No tiers, no surprises.

Get started

Code

<section class="bg-white dark:bg-gray-950 py-24">
  <div class="mx-auto max-w-lg px-6 text-center">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white">One simple plan</h2>
    <div class="mt-10 rounded-2xl border-2 border-indigo-600 bg-white p-8 dark:border-indigo-500 dark:bg-gray-900 transition-shadow duration-200 hover:shadow-xl">
      <h3 class="font-semibold text-gray-900 dark:text-white">Pro</h3>
      <p class="mt-4 text-4xl font-bold text-gray-900 dark:text-white">$49<span class="text-base font-normal text-gray-500 dark:text-gray-400">/month</span></p>
      <p class="mt-4 text-sm text-gray-600 dark:text-gray-300">Everything you need. No tiers, no surprises.</p>
      <a href="#" class="mt-6 block rounded-full bg-indigo-600 py-2.5 text-center text-sm font-semibold text-white hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400 transition-colors duration-200">Get started</a>
    </div>
  </div>
</section>

Compact two plans

Pricing section variant 14. Copy the code and use anywhere.

Choose your plan

Starter

$19/mo

Select

Pro

$49/mo

Select

Code

<section class="bg-gray-50 dark:bg-gray-950 py-24">
  <div class="mx-auto max-w-4xl px-6">
    <h2 class="text-center text-2xl font-bold text-gray-900 dark:text-white">Choose your plan</h2>
    <div class="mt-12 grid gap-8 sm:grid-cols-2">
      <div class="rounded-xl border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900 transition-shadow duration-200 hover:shadow-lg">
        <h3 class="font-semibold text-gray-900 dark:text-white">Starter</h3>
        <p class="mt-2 text-2xl font-bold text-gray-900 dark:text-white">$19<span class="text-sm font-normal text-gray-500 dark:text-gray-400">/mo</span></p>
        <a href="#" class="mt-4 block rounded-lg border border-gray-300 py-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-50 dark:border-gray-600 dark:text-white dark:hover:bg-gray-800 transition-colors duration-200">Select</a>
      </div>
      <div class="rounded-xl border-2 border-indigo-600 bg-white p-6 dark:border-indigo-500 dark:bg-gray-900 transition-shadow duration-200 hover:shadow-lg">
        <h3 class="font-semibold text-gray-900 dark:text-white">Pro</h3>
        <p class="mt-2 text-2xl font-bold text-gray-900 dark:text-white">$49<span class="text-sm font-normal text-gray-500 dark:text-gray-400">/mo</span></p>
        <a href="#" class="mt-4 block rounded-lg bg-indigo-600 py-2 text-center text-sm font-medium text-white hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400 transition-colors duration-200">Select</a>
      </div>
    </div>
  </div>
</section>