Copy Create an outcome-based pricing simulator with Tailwind CSS for a conversion service. Include inputs for current monthly revenue, expected uplift, and engagement tier. Show the fixed platform fee, projected incremental revenue, success fee, total monthly cost, and net value retained. Add a horizontal value split bar and JavaScript that formats currency, validates inputs, applies different success-fee rates by tier, and updates all figures live.<div class="mx-auto max-w-2xl p-6"><section class="grid overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-sm md:grid-cols-2"><div class="p-6"><p class="text-xs font-semibold uppercase tracking-wider text-neutral-400">Outcome pricing</p><h2 class="mt-2 text-xl font-semibold text-neutral-900">Pay when growth arrives</h2><div class="mt-6 space-y-4"><label class="block text-sm font-medium text-neutral-700">Monthly revenue<input id="outcomeRevenue" type="number" min="1000" value="80000" class="mt-1.5 w-full rounded-xl border border-neutral-200 px-3 py-2.5 outline-none focus:border-neutral-900" /></label><label class="block text-sm font-medium text-neutral-700">Expected uplift <span id="upliftLabel" class="float-right text-neutral-500">12%</span><input id="outcomeUplift" type="range" min="1" max="30" value="12" class="mt-3 w-full accent-neutral-900" /></label><label class="block text-sm font-medium text-neutral-700">Engagement tier<select id="outcomeTier" class="mt-1.5 w-full rounded-xl border border-neutral-200 px-3 py-2.5"><option value="1200,0.12">Guided · 12% success fee</option><option value="2400,0.09">Partner · 9% success fee</option><option value="4800,0.06">Embedded · 6% success fee</option></select></label></div></div><div class="bg-neutral-900 p-6 text-white"><p class="text-sm text-white/60">Projected monthly economics</p><div class="mt-5 space-y-3 text-sm"><div class="flex justify-between"><span class="text-white/60">Platform fee</span><span id="platformFee"></span></div><div class="flex justify-between"><span class="text-white/60">Incremental revenue</span><span id="incrementalRevenue"></span></div><div class="flex justify-between"><span class="text-white/60">Success fee</span><span id="successFee"></span></div></div><div class="my-5 h-px bg-white/10"></div><div class="flex items-end justify-between"><span class="text-sm text-white/60">Net value retained</span><strong id="retainedValue" class="text-2xl"></strong></div><div class="mt-5 flex h-2 overflow-hidden rounded-full bg-white/10"><span id="retainedBar" class="bg-emerald-400"></span><span id="feeBar" class="bg-violet-400"></span></div><div class="mt-2 flex justify-between text-[11px] text-white/50"><span>Value retained</span><span>Total fees <b id="totalFee"></b></span></div></div></section></div>var revenue = document.getElementById("outcomeRevenue"); var uplift = document.getElementById("outcomeUplift"); var tier = document.getElementById("outcomeTier");
function usd(value) { return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 }).format(value); }
function updateOutcome() { var base = Math.max(0, Number(revenue.value) || 0); var lift = Number(uplift.value) / 100; var parts = tier.value.split(","); var platform = Number(parts[0]); var rate = Number(parts[1]); var incremental = base * lift; var success = incremental * rate; var fees = platform + success; var retained = Math.max(0, incremental - fees); var retainedPercent = incremental ? retained / incremental * 100 : 0; document.getElementById("upliftLabel").textContent = uplift.value + "%"; document.getElementById("platformFee").textContent = usd(platform); document.getElementById("incrementalRevenue").textContent = usd(incremental); document.getElementById("successFee").textContent = usd(success); document.getElementById("retainedValue").textContent = usd(retained); document.getElementById("totalFee").textContent = usd(fees); document.getElementById("retainedBar").style.width = retainedPercent + "%"; document.getElementById("feeBar").style.width = Math.max(0, 100 - retainedPercent) + "%"; }
[revenue, uplift, tier].forEach(function (control) { control.addEventListener("input", updateOutcome); }); updateOutcome(); 