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.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
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);
});
