Create a feedback widget with Tailwind CSS. Use a max-w-md bordered card with a heading asking how likely the person is to recommend the product, and a row of eleven small numbered buttons from zero to ten that wrap on narrow screens, with muted "Not likely" and "Very likely" labels at the ends. When a score is chosen it fills dark and a second stage appears: a short prompt whose wording depends on the score band, a textarea, an optional checkbox offering a follow-up conversation, and a dark submit button beside a ghost "Not now" link. Then add JavaScript that highlights the chosen number, reveals the second stage with a small height and opacity transition, changes the prompt for detractors, passives and promoters, keeps the score in a hidden field, and replaces the card contents with a short thank-you state on submit.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Create a feedback widget with Tailwind CSS. Use a max-w-md bordered card with a heading asking how likely the person is to recommend the product, and a row of eleven small numbered buttons from zero to ten that wrap on narrow screens, with muted "Not likely" and "Very likely" labels at the ends. When a score is chosen it fills dark and a second stage appears: a short prompt whose wording depends on the score band, a textarea, an optional checkbox offering a follow-up conversation, and a dark submit button beside a ghost "Not now" link. Then add JavaScript that highlights the chosen number, reveals the second stage with a small height and opacity transition, changes the prompt for detractors, passives and promoters, keeps the score in a hidden field, and replaces the card contents with a short thank-you state on submit.
var card = document.getElementById("npsCard");
var buttons = Array.prototype.slice.call(document.querySelectorAll(".nps"));
var stage = document.getElementById("npsStage");
var prompt = document.getElementById("npsPrompt");
var hidden = document.getElementById("npsValue");
function promptFor(score) {
if (score <= 6) return "Sorry to hear it. What went wrong?";
if (score <= 8) return "What would have made that a 10?";
return "Glad to hear it. What works best for you?";
}
buttons.forEach(function (btn) {
btn.addEventListener("click", function () {
var score = Number(btn.dataset.score);
hidden.value = score;
buttons.forEach(function (b) {
var on = b === btn;
b.classList.toggle("bg-neutral-900", on);
b.classList.toggle("text-white", on);
b.classList.toggle("border-neutral-900", on);
b.classList.toggle("text-neutral-600", !on);
});
prompt.textContent = promptFor(score);
// A generous ceiling: the stage is short, and max-height only needs to clear it.
stage.classList.remove("max-h-0", "opacity-0");
stage.classList.add("max-h-96", "opacity-100");
});
});
document.getElementById("npsSubmit").addEventListener("click", function () {
card.innerHTML =
'<div class="py-6 text-center">' +
'<div class="mx-auto grid h-12 w-12 place-items-center rounded-full bg-green-100 text-xl text-green-700">✓</div>' +
'<p class="mt-4 text-base font-semibold text-neutral-900">Thank you — that is genuinely useful</p>' +
'<p class="mt-1.5 text-sm text-neutral-500">Every response is read by the product team on Monday morning.</p>' +
"</div>";
});
