Build a usage-based pricing estimator with Tailwind CSS. A wide rounded-3xl card split into two parts: on the left a range slider labelled "Monthly API calls" with the current value shown large above it and min/max hints below, plus a second slider for seats. On the right a bordered summary panel listing base platform fee, metered usage, and seats as line items, a divider, and a bold estimated monthly total with a per-unit footnote and a CTA button. Style the sliders with accent-neutral-900 and give every value that changes its own id. Then add JavaScript that recomputes the estimate on every slider input: map the call slider through a quadratic curve from 100K to 10M so the low end stays fine-grained, charge $0.05 per 1K calls beyond a 500K included tier, add $12 per seat on top of a $49 platform fee, and write the formatted call count, line items, and total back into the panel.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Build a usage-based pricing estimator with Tailwind CSS. A wide rounded-3xl card split into two parts: on the left a range slider labelled "Monthly API calls" with the current value shown large above it and min/max hints below, plus a second slider for seats. On the right a bordered summary panel listing base platform fee, metered usage, and seats as line items, a divider, and a bold estimated monthly total with a per-unit footnote and a CTA button. Style the sliders with accent-neutral-900 and give every value that changes its own id. Then add JavaScript that recomputes the estimate on every slider input: map the call slider through a quadratic curve from 100K to 10M so the low end stays fine-grained, charge $0.05 per 1K calls beyond a 500K included tier, add $12 per seat on top of a $49 platform fee, and write the formatted call count, line items, and total back into the panel.
// Pricing model — the single place to change rates.
var PLATFORM_FEE = 49; // flat monthly fee
var RATE_PER_1K = 0.05; // metered rate beyond the included tier
var INCLUDED = 500000;
var PER_SEAT = 12;
var MIN_CALLS = 100000;
var MAX_CALLS = 10000000;
var calls = document.getElementById("calls");
var seats = document.getElementById("seats");
// Square the slider position so the low end of the range gets more travel —
// most teams live nearer 100K than 10M, and a linear map buries that end.
function callsFor(position) {
var t = position / 100;
return Math.round(MIN_CALLS + t * t * (MAX_CALLS - MIN_CALLS));
}
function formatCalls(n) {
return n >= 1000000 ? (n / 1000000).toFixed(1) + "M" : Math.round(n / 1000) + "K";
}
function money(n) {
return "$" + Math.round(n).toLocaleString("en-US");
}
function render() {
var n = callsFor(Number(calls.value));
var seatCount = Number(seats.value);
var metered = Math.max(0, n - INCLUDED) / 1000 * RATE_PER_1K;
var seatCost = seatCount * PER_SEAT;
document.getElementById("callsOut").textContent = formatCalls(n);
document.getElementById("seatsOut").textContent = seatCount;
document.getElementById("callsRow").textContent = formatCalls(n) + " calls";
document.getElementById("callsCost").textContent = money(metered);
document.getElementById("seatsRow").textContent =
seatCount + (seatCount === 1 ? " seat" : " seats");
document.getElementById("seatsCost").textContent = money(seatCost);
document.getElementById("total").textContent = money(PLATFORM_FEE + metered + seatCost);
}
calls.addEventListener("input", render);
seats.addEventListener("input", render);
render();
