Build a brand-voice calibration onboarding step with Tailwind CSS. Present four pairs of alternative microcopy where the user chooses which version sounds more like the brand. Include progress, skip, back, and continue controls plus a live voice profile that updates across dimensions such as direct, warm, technical, and playful. Add JavaScript that records one choice per pair, updates the profile bars, and enables Continue only after every pair has an answer.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Build a brand-voice calibration onboarding step with Tailwind CSS. Present four pairs of alternative microcopy where the user chooses which version sounds more like the brand. Include progress, skip, back, and continue controls plus a live voice profile that updates across dimensions such as direct, warm, technical, and playful. Add JavaScript that records one choice per pair, updates the profile bars, and enables Continue only after every pair has an answer.
<div class="min-h-screen bg-neutral-50 p-6"><section class="mx-auto grid max-w-5xl overflow-hidden rounded-3xl border border-neutral-200 bg-white shadow-sm lg:grid-cols-[1.4fr_0.6fr]"><div class="p-6 md:p-9"><div class="flex justify-between text-xs text-neutral-400"><span>Voice setup · Step 3 of 5</span><button>Skip for now</button></div><div class="mt-3 h-1 rounded-full bg-neutral-100"><div class="h-full w-3/5 rounded-full bg-neutral-900"></div></div><h1 class="mt-8 text-2xl font-semibold text-neutral-900">Which version sounds more like you?</h1><p class="mt-2 text-sm text-neutral-500">Choose one line from each pair. There are no wrong answers.</p><div id="voicePairs" class="mt-7 space-y-5"><fieldset data-pair><legend class="text-xs font-medium text-neutral-400">Welcoming a new customer</legend><div class="mt-2 grid gap-2 sm:grid-cols-2"><button data-scores="3,2,1,0" class="rounded-xl border border-neutral-200 p-3 text-left text-sm">Welcome aboard. Let’s get your workspace ready.</button><button data-scores="1,3,0,2" class="rounded-xl border border-neutral-200 p-3 text-left text-sm">You’re in! Time to make something brilliant.</button></div></fieldset><fieldset data-pair><legend class="text-xs font-medium text-neutral-400">Explaining an error</legend><div class="mt-2 grid gap-2 sm:grid-cols-2"><button data-scores="3,1,3,0" class="rounded-xl border border-neutral-200 p-3 text-left text-sm">The export stopped because row 48 has no email address.</button><button data-scores="1,3,1,1" class="rounded-xl border border-neutral-200 p-3 text-left text-sm">We hit a snag while preparing your export.</button></div></fieldset><fieldset data-pair><legend class="text-xs font-medium text-neutral-400">Celebrating completion</legend><div class="mt-2 grid gap-2 sm:grid-cols-2"><button data-scores="2,2,1,3" class="rounded-xl border border-neutral-200 p-3 text-left text-sm">Nice work — your first automation is live.</button><button data-scores="3,1,2,0" class="rounded-xl border border-neutral-200 p-3 text-left text-sm">Automation enabled successfully.</button></div></fieldset><fieldset data-pair><legend class="text-xs font-medium text-neutral-400">Introducing a feature</legend><div class="mt-2 grid gap-2 sm:grid-cols-2"><button data-scores="2,2,3,0" class="rounded-xl border border-neutral-200 p-3 text-left text-sm">Branch rules evaluate every deployment before release.</button><button data-scores="1,3,1,2" class="rounded-xl border border-neutral-200 p-3 text-left text-sm">Meet the safety net for every launch.</button></div></fieldset></div><div class="mt-8 flex justify-between"><button class="rounded-xl border border-neutral-200 px-4 py-2 text-sm">Back</button><button id="voiceContinue" disabled class="rounded-xl bg-neutral-900 px-5 py-2 text-sm font-medium text-white disabled:opacity-30">Continue</button></div></div><aside class="bg-neutral-950 p-6 text-white md:p-8"><p class="text-xs uppercase tracking-wider text-white/40">Your voice profile</p><div id="voiceProfile" class="mt-8 space-y-5"></div><p id="voiceAnswered" class="mt-8 text-xs text-white/40">0 of 4 choices made</p></aside></section></div>
