Single plan focus

Build a single-plan pricing block with Tailwind CSS. Centered card with a monthly/annual toggle (annual shows a "Save 20%" pill), a large price, a feature checklist in two columns, and one prominent CTA. Add a small "14-day money-back guarantee" note under the button. Give each toggle button a data-period attribute and ids to the price and the billing note, then add JavaScript that swaps the active pill styling and rewrites the price when the period changes — $29/mo billed monthly, $23/mo when billed annually — and shows the annual total charged up front in the note line.

<section class="mx-auto max-w-lg px-6 py-16 text-center">
  <div id="period" class="mb-6 inline-flex items-center gap-1 rounded-full bg-neutral-100 p-1 text-sm">
    <button data-period="monthly" class="rounded-full bg-white px-4 py-1.5 font-medium text-neutral-900 shadow-sm">Monthly</button>
    <button data-period="annual" class="rounded-full px-4 py-1.5 text-neutral-500">Annual <span class="ml-1 rounded-full bg-green-100 px-2 py-0.5 text-xs text-green-700">Save 20%</span></button>
  </div>
  <div class="rounded-3xl border border-neutral-200 bg-white p-10 shadow-sm">
    <h3 class="text-lg font-medium text-neutral-900">Everything, one price</h3>
    <p class="mt-4"><span id="price" class="text-5xl font-semibold text-neutral-900">$29</span><span class="text-neutral-500">/mo</span></p>
    <p id="billingNote" class="mt-2 text-xs text-neutral-400">Billed monthly. Cancel anytime.</p>
    <ul class="mx-auto mt-8 grid max-w-sm grid-cols-2 gap-3 text-left 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> Unlimited seats</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> All integrations</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> 24/7 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> Custom domains</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> API access</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> Audit logs</li>
    </ul>
    <button class="mt-8 w-full rounded-xl bg-neutral-900 py-3 text-sm font-medium text-white hover:bg-neutral-800">Get started</button>
    <p class="mt-3 text-xs text-neutral-400">14-day money-back guarantee</p>
  </div>
</section>

var MONTHLY = 29;
var DISCOUNT = 0.2;

var buttons = [].slice.call(document.querySelectorAll("#period [data-period]"));
var price = document.getElementById("price");
var note = document.getElementById("billingNote");

var ACTIVE = "rounded-full bg-white px-4 py-1.5 font-medium text-neutral-900 shadow-sm";
var IDLE = "rounded-full px-4 py-1.5 text-neutral-500";

function select(period) {
  buttons.forEach(function (btn) {
    var on = btn.getAttribute("data-period") === period;
    // Keep the pill's inner "Save 20%" badge — only the button's own classes swap.
    btn.className = on ? ACTIVE : IDLE;
  });

  if (period === "annual") {
    var perMonth = Math.round(MONTHLY * (1 - DISCOUNT));
    price.textContent = "$" + perMonth;
    note.textContent = "Billed annually at $" + perMonth * 12 + ". Cancel anytime.";
  } else {
    price.textContent = "$" + MONTHLY;
    note.textContent = "Billed monthly. Cancel anytime.";
  }
}

buttons.forEach(function (btn) {
  btn.addEventListener("click", function () {
    select(btn.getAttribute("data-period"));
  });
});

select("monthly");