Build an in-product seat-limit CTA with Tailwind CSS. Show a nearly full avatar stack, 9 of 10 seats used, a progress bar, the next teammate waiting to join, and two actions to review members or add five seats. Include transparent prorated pricing. Add JavaScript that removes the nudge when dismissed, opens a compact cost confirmation when adding seats, and updates the seat count after confirmation.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Build an in-product seat-limit CTA with Tailwind CSS. Show a nearly full avatar stack, 9 of 10 seats used, a progress bar, the next teammate waiting to join, and two actions to review members or add five seats. Include transparent prorated pricing. Add JavaScript that removes the nudge when dismissed, opens a compact cost confirmation when adding seats, and updates the seat count after confirmation.
var nudge = document.getElementById("seatNudge"); var confirmBox = document.getElementById("seatConfirm"); document.getElementById("seatDismiss").addEventListener("click", function () { nudge.remove(); }); document.getElementById("seatAdd").addEventListener("click", function () { confirmBox.classList.remove("hidden"); }); document.getElementById("seatCancel").addEventListener("click", function () { confirmBox.classList.add("hidden"); }); document.getElementById("seatCommit").addEventListener("click", function () { document.getElementById("seatLabel").textContent = "9 of 15 seats are in use"; document.getElementById("seatProgress").style.width = "60%"; confirmBox.innerHTML = '<p class="text-sm font-medium text-green-700">✓ Five seats added. Alex can join now.</p>'; });
