Sliding scale supporter pricing

Create a pay-what-you-can pricing block with Tailwind CSS for an independent or open-source product. Centre a max-w-2xl card with a heading, a paragraph explaining the software is the same at every price and the higher tiers fund the lower ones, and a row of three preset amount cards — Supporter, Standard and Patron — each with a monthly figure, a one-line description of who it is for, and a small label; the middle one is preselected with a neutral-900 border. Under them, a custom amount row with a currency addon and a numeric input, plus a slider tied to the same value. Then a distribution strip showing three thin bars labelled with the share of users at each tier. Finish with a dark button whose label carries the chosen amount and a muted line saying the price can be changed or paused at any time, no questions asked.

<section class="mx-auto max-w-2xl px-6 py-16">
  <div class="rounded-2xl border border-neutral-200 bg-white p-8">
    <h2 class="text-2xl font-semibold tracking-tight text-neutral-900">Pay what it is worth to you</h2>
    <p class="mt-3 leading-relaxed text-neutral-500">
      Every tier gets identical software — no locked features, no seat limits. The higher tiers pay for the people who cannot, which is how this stays available to everyone.
    </p>

    <div class="mt-8 grid gap-3 sm:grid-cols-3">
      <button class="rounded-xl border border-neutral-200 p-5 text-left transition hover:bg-neutral-50">
        <p class="text-xs font-medium uppercase tracking-widest text-neutral-400">Supporter</p>
        <p class="mt-2 text-2xl font-semibold text-neutral-900">$4<span class="text-sm font-normal text-neutral-400">/mo</span></p>
        <p class="mt-1.5 text-xs leading-relaxed text-neutral-500">Students, hobby projects and anyone between jobs.</p>
      </button>
      <button class="rounded-xl border-2 border-neutral-900 p-5 text-left">
        <p class="text-xs font-medium uppercase tracking-widest text-neutral-400">Standard</p>
        <p class="mt-2 text-2xl font-semibold text-neutral-900">$12<span class="text-sm font-normal text-neutral-400">/mo</span></p>
        <p class="mt-1.5 text-xs leading-relaxed text-neutral-500">Individuals using it for paid work.</p>
      </button>
      <button class="rounded-xl border border-neutral-200 p-5 text-left transition hover:bg-neutral-50">
        <p class="text-xs font-medium uppercase tracking-widest text-neutral-400">Patron</p>
        <p class="mt-2 text-2xl font-semibold text-neutral-900">$30<span class="text-sm font-normal text-neutral-400">/mo</span></p>
        <p class="mt-1.5 text-xs leading-relaxed text-neutral-500">Teams and companies funding the roadmap.</p>
      </button>
    </div>

    <div class="mt-7">
      <label class="mb-2 block text-xs font-medium text-neutral-700">Or choose your own amount</label>
      <div class="flex items-center rounded-xl border border-neutral-200 transition focus-within:border-neutral-900 focus-within:ring-4 focus-within:ring-neutral-900/10">
        <span class="border-r border-neutral-200 bg-neutral-50 px-4 py-2.5 text-sm text-neutral-500">USD</span>
        <input id="scaleInput" type="number" min="2" max="100" value="12"
          class="min-w-0 flex-1 px-3.5 py-2.5 text-sm outline-none" />
        <span class="px-4 text-sm text-neutral-400">per month</span>
      </div>
      <input id="scaleRange" type="range" min="2" max="100" value="12" class="mt-4 w-full accent-neutral-900" />
      <div class="mt-1 flex justify-between text-[11px] text-neutral-400"><span>$2</span><span>$100</span></div>
    </div>

    <div class="mt-8 border-t border-neutral-200 pt-6">
      <p class="text-xs font-semibold uppercase tracking-widest text-neutral-400">Where people land</p>
      <div class="mt-4 space-y-3">
        <div class="flex items-center gap-3">
          <span class="w-20 shrink-0 text-xs text-neutral-500">Supporter</span>
          <div class="h-2 flex-1 overflow-hidden rounded-full bg-neutral-100"><div class="h-full w-[31%] rounded-full bg-neutral-300"></div></div>
          <span class="w-10 shrink-0 text-right font-mono text-xs text-neutral-400">31%</span>
        </div>
        <div class="flex items-center gap-3">
          <span class="w-20 shrink-0 text-xs text-neutral-500">Standard</span>
          <div class="h-2 flex-1 overflow-hidden rounded-full bg-neutral-100"><div class="h-full w-[52%] rounded-full bg-neutral-900"></div></div>
          <span class="w-10 shrink-0 text-right font-mono text-xs text-neutral-400">52%</span>
        </div>
        <div class="flex items-center gap-3">
          <span class="w-20 shrink-0 text-xs text-neutral-500">Patron</span>
          <div class="h-2 flex-1 overflow-hidden rounded-full bg-neutral-100"><div class="h-full w-[17%] rounded-full bg-neutral-300"></div></div>
          <span class="w-10 shrink-0 text-right font-mono text-xs text-neutral-400">17%</span>
        </div>
      </div>
    </div>

    <button id="scaleCta" class="mt-7 w-full rounded-xl bg-neutral-900 py-3 text-sm font-medium text-white transition hover:bg-neutral-800">Support at $12 a month</button>
    <p class="mt-3 text-center text-xs text-neutral-400">Change the amount or pause it any time, from settings, without emailing anyone.</p>
  </div>
</section>

var input = document.getElementById("scaleInput");
var range = document.getElementById("scaleRange");
var cta = document.getElementById("scaleCta");

function clamp(value) {
  var n = Number(value);
  if (!n || n < 2) return 2;
  return Math.min(n, 100);
}

function sync(value) {
  var amount = clamp(value);
  input.value = amount;
  range.value = amount;
  cta.textContent = "Support at $" + amount + " a month";
}

input.addEventListener("input", function () {
  // Let the field be briefly empty while typing rather than snapping to 2.
  if (input.value === "") return;
  sync(input.value);
});

input.addEventListener("blur", function () {
  sync(input.value);
});

range.addEventListener("input", function () {
  sync(range.value);
});