Build a first-run welcome modal with Tailwind CSS. Use a fixed inset-0 overlay with a blurred dark backdrop centring a max-w-lg white card with rounded-2xl corners. The card opens with a wide banner area drawn as a soft neutral gradient holding a large glyph and a small monospaced version tag in the corner. Under it, a heading welcoming the person by name, a paragraph of two sentences, and three suggested actions as bordered rows with a glyph tile, a title, a one-line description and a right chevron, the first row carrying a small "Start here" pill. The footer has a checkbox reading "Do not show this again" on the left and two buttons on the right, a ghost "Skip the tour" and a dark "Take the tour". Then add JavaScript that closes the modal on either button, on Escape and on a backdrop click, and remembers the checkbox choice in localStorage so a return visit skips it.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Build a first-run welcome modal with Tailwind CSS. Use a fixed inset-0 overlay with a blurred dark backdrop centring a max-w-lg white card with rounded-2xl corners. The card opens with a wide banner area drawn as a soft neutral gradient holding a large glyph and a small monospaced version tag in the corner. Under it, a heading welcoming the person by name, a paragraph of two sentences, and three suggested actions as bordered rows with a glyph tile, a title, a one-line description and a right chevron, the first row carrying a small "Start here" pill. The footer has a checkbox reading "Do not show this again" on the left and two buttons on the right, a ghost "Skip the tour" and a dark "Take the tour". Then add JavaScript that closes the modal on either button, on Escape and on a backdrop click, and remembers the checkbox choice in localStorage so a return visit skips it.
var KEY = "welcome:v4.2:dismissed";
var modal = document.getElementById("welcomeModal");
var card = document.getElementById("welcomeCard");
var dismiss = document.getElementById("welcomeDismiss");
function close() {
if (dismiss.checked) {
try {
localStorage.setItem(KEY, "1");
} catch (e) {
// Blocked storage just means they see this again next time.
}
}
modal.remove();
}
document.getElementById("welcomeSkip").addEventListener("click", close);
document.getElementById("welcomeStart").addEventListener("click", close);
modal.addEventListener("click", function (e) {
if (!card.contains(e.target)) close();
});
document.addEventListener("keydown", function (e) {
if (e.key === "Escape") close();
});
try {
if (localStorage.getItem(KEY) === "1") modal.remove();
} catch (e) {}
