Guided sequence introducing an interface.
Step 2 of 4
Here's a quick look at what's changed — you can revisit this tour any time from Help.
<div class="pt-wrap">
<div class="pt-backdrop" aria-hidden="true">
<div class="pt-chrome"></div>
<div class="pt-chrome pt-chrome--wide"></div>
<div class="pt-chrome"></div>
</div>
<div class="pt-card" style="--accent:#BFD9F2;">
<button type="button" class="pt-close" aria-label="Skip tour">×</button>
<p class="pt-step">Step 2 of 4</p>
<div class="pt-bar"><span class="pt-bar__fill" style="width:calc(2 / 4 * 100%);"></span></div>
<h3 class="pt-title">See what's new in your dashboard</h3>
<p class="pt-body">Here's a quick look at what's changed — you can revisit this tour any time from Help.</p>
<div class="pt-actions">
<button type="button" class="pt-back">Back</button>
<button type="button" class="pt-next">Next</button>
</div>
</div>
</div>
<style>
.pt-wrap { position: relative; font: 16px/1.5 system-ui, sans-serif; color: #241430; width: 380px; height: 220px; background: #FAF7F2; border-radius: 14px; overflow: hidden; border: 1px solid #24143018; }
.pt-backdrop { position: absolute; inset: 0; padding: 18px; opacity: .5; }
.pt-chrome { height: 16px; border-radius: 6px; background: #24143022; margin-bottom: 10px; }
.pt-chrome--wide { height: 70px; }
.pt-card { position: absolute; left: 16px; right: 16px; bottom: 16px; background: #fff; border-radius: 12px; padding: 16px 18px; box-shadow: 0 12px 30px rgba(36,20,48,.22); }
.pt-close { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border: none; background: transparent; color: #24143070; font-size: 15px; cursor: pointer; border-radius: 6px; }
.pt-close:hover, .pt-close:focus-visible { background: #24143012; color: #241430; }
.pt-step { margin: 0 0 6px; font-size: 11px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; }
.pt-bar { height: 4px; border-radius: 2px; background: #24143018; margin-bottom: 12px; overflow: hidden; }
.pt-bar__fill { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.pt-title { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.pt-body { margin: 0 0 14px; font-size: 12.5px; color: #241430b3; }
.pt-actions { display: flex; justify-content: flex-end; gap: 8px; }
.pt-back, .pt-next { border-radius: 8px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.pt-back { background: none; border: 1.5px solid #24143025; color: #241430; }
.pt-next { background: var(--accent); border: 1.5px solid var(--accent); color: #241430; }
</style><div class="pt-tw-wrap relative font-sans text-[#241430] w-[380px] h-[220px] bg-[#FAF7F2] rounded-2xl overflow-hidden border border-[#24143018]">
<div class="absolute inset-0 p-4.5 opacity-50" aria-hidden="true">
<div class="h-4 rounded-md bg-[#24143022] mb-2.5"></div>
<div class="h-[70px] rounded-md bg-[#24143022] mb-2.5"></div>
<div class="h-4 rounded-md bg-[#24143022] mb-2.5"></div>
</div>
<div class="absolute left-4 right-4 bottom-4 bg-white rounded-xl p-4 shadow-[0_12px_30px_rgba(36,20,48,.22)]" style="--accent:#BFD9F2">
<button type="button" class="absolute top-2 right-2 w-6 h-6 rounded-md text-[#24143070] hover:bg-[#24143012] hover:text-[#241430]" aria-label="Skip tour">×</button>
<p class="m-0 mb-1.5 text-[11px] font-semibold uppercase tracking-wide" style="color:#BFD9F2">Step 2 of 4</p>
<div class="h-1 rounded-full bg-[#24143018] mb-3 overflow-hidden"><span class="block h-full rounded-full" style="background:#BFD9F2;width:calc(2 / 4 * 100%)"></span></div>
<h3 class="m-0 mb-1.5 text-[15px] font-bold">See what's new in your dashboard</h3>
<p class="m-0 mb-3.5 text-xs text-[#241430]/70">Here's a quick look at what's changed — you can revisit this tour any time from Help.</p>
<div class="flex justify-end gap-2">
<button type="button" class="rounded-lg px-3 py-1.5 text-xs font-semibold border-[1.5px] border-[#24143025]">Back</button>
<button type="button" class="rounded-lg px-3 py-1.5 text-xs font-semibold" style="background:#BFD9F2;border:1.5px solid #BFD9F2">Next</button>
</div>
</div>
</div>export function ProductTour({
title = "See what's new in your dashboard",
step = 2,
totalSteps = 4,
accent = "#BFD9F2",
dismissLabel = "Skip tour",
}) {
const pct = Math.min(100, (step / totalSteps) * 100);
return (
<div style={{ position: "relative", fontFamily: "system-ui, sans-serif", color: "#241430", width: 380, height: 220, background: "#FAF7F2", borderRadius: 14, overflow: "hidden", border: "1px solid #24143018" }}>
<div aria-hidden="true" style={{ position: "absolute", inset: 0, padding: 18, opacity: 0.5 }}>
<div style={{ height: 16, borderRadius: 6, background: "#24143022", marginBottom: 10 }} />
<div style={{ height: 70, borderRadius: 6, background: "#24143022", marginBottom: 10 }} />
<div style={{ height: 16, borderRadius: 6, background: "#24143022", marginBottom: 10 }} />
</div>
<div style={{ position: "absolute", left: 16, right: 16, bottom: 16, background: "#fff", borderRadius: 12, padding: "16px 18px", boxShadow: "0 12px 30px rgba(36,20,48,.22)" }}>
<button type="button" aria-label={dismissLabel} style={{ position: "absolute", top: 8, right: 8, width: 24, height: 24, border: "none", background: "transparent", color: "#24143070", fontSize: 15, borderRadius: 6, cursor: "pointer" }}>×</button>
<p style={{ margin: "0 0 6px", fontSize: 11, fontWeight: 600, color: accent, textTransform: "uppercase", letterSpacing: ".04em" }}>Step {step} of {totalSteps}</p>
<div style={{ height: 4, borderRadius: 2, background: "#24143018", marginBottom: 12, overflow: "hidden" }}>
<span style={{ display: "block", height: "100%", width: pct + "%", background: accent, borderRadius: 2 }} />
</div>
<h3 style={{ margin: "0 0 6px", fontSize: 15, fontWeight: 700 }}>{title}</h3>
<p style={{ margin: "0 0 14px", fontSize: 12.5, color: "#241430b3" }}>Here's a quick look at what's changed — you can revisit this tour any time from Help.</p>
<div style={{ display: "flex", justifyContent: "flex-end", gap: 8 }}>
<button type="button" style={{ borderRadius: 8, padding: "6px 12px", fontSize: 12.5, fontWeight: 600, background: "none", border: "1.5px solid #24143025", color: "#241430", cursor: "pointer" }}>Back</button>
<button type="button" style={{ borderRadius: 8, padding: "6px 12px", fontSize: 12.5, fontWeight: 600, background: accent, border: "1.5px solid " + accent, color: "#241430", cursor: "pointer" }}>Next</button>
</div>
</div>
</div>
);
}