Tailor a long-form reading route to the reader’s goal
Live preview
The prompt
Create a choose-your-path field guide with Tailwind CSS. Start with an editorial article introduction and three reader-goal cards: plan a migration, lead a team, or evaluate risk. After selection, reveal a tailored three-chapter reading route with estimated times, key questions, progress markers, and a reset control. Add JavaScript that changes the route from structured data, marks chapters complete, updates total progress, and reflects the chosen path in the URL hash.
Create a choose-your-path field guide with Tailwind CSS. Start with an editorial article introduction and three reader-goal cards: plan a migration, lead a team, or evaluate risk. After selection, reveal a tailored three-chapter reading route with estimated times, key questions, progress markers, and a reset control. Add JavaScript that changes the route from structured data, marks chapters complete, updates total progress, and reflects the chosen path in the URL hash.
<main class="min-h-screen bg-[#f5f2eb] px-6 py-14"><article class="mx-auto max-w-5xl"><header class="max-w-3xl"><p class="font-mono text-xs uppercase tracking-[0.18em] text-neutral-500">Interactive field guide · 2026 edition</p><h1 class="mt-5 font-serif text-5xl leading-none tracking-tight text-neutral-950 sm:text-7xl">Changing systems without losing the people inside them.</h1><p class="mt-6 max-w-2xl text-lg leading-8 text-neutral-600">A practical guide to migration work. Choose the question bringing you here and we will shape a focused route through the material.</p></header><section id="pathChooser" class="mt-12"><h2 class="text-sm font-semibold text-neutral-900">What are you here to do?</h2><div class="mt-4 grid gap-3 md:grid-cols-3"><button data-path="migration" class="rounded-2xl border border-neutral-300 bg-white p-5 text-left transition hover:-translate-y-0.5 hover:shadow-md"><span class="font-mono text-xs text-blue-700">01</span><b class="mt-8 block text-lg">Plan a migration</b><p class="mt-2 text-sm leading-6 text-neutral-500">Sequence technical change with safe reversals.</p></button><button data-path="leadership" class="rounded-2xl border border-neutral-300 bg-white p-5 text-left transition hover:-translate-y-0.5 hover:shadow-md"><span class="font-mono text-xs text-violet-700">02</span><b class="mt-8 block text-lg">Lead the team</b><p class="mt-2 text-sm leading-6 text-neutral-500">Create clarity without hiding uncertainty.</p></button><button data-path="risk" class="rounded-2xl border border-neutral-300 bg-white p-5 text-left transition hover:-translate-y-0.5 hover:shadow-md"><span class="font-mono text-xs text-amber-700">03</span><b class="mt-8 block text-lg">Evaluate risk</b><p class="mt-2 text-sm leading-6 text-neutral-500">Test assumptions before commitment grows.</p></button></div></section><section id="pathRoute" class="mt-12 hidden grid gap-8 md:grid-cols-[0.65fr_1.35fr]"><aside><p class="text-xs uppercase tracking-wider text-neutral-500">Your reading route</p><h2 id="pathTitle" class="mt-3 font-serif text-3xl"></h2><p id="pathIntro" class="mt-3 text-sm leading-6 text-neutral-500"></p><div class="mt-6 h-1.5 rounded-full bg-neutral-200"><div id="pathProgress" class="h-full w-0 rounded-full bg-neutral-900 transition-all"></div></div><p id="pathStatus" class="mt-2 text-xs text-neutral-400"></p><button id="pathReset" class="mt-6 border-b border-neutral-400 pb-1 text-xs text-neutral-500">Choose a different path</button></aside><ol id="pathChapters" class="space-y-3"></ol></section></article></main>
Create a choose-your-path field guide with Tailwind CSS. Start with an editorial article introduction and three reader-goal cards: plan a migration, lead a team, or evaluate risk. After selection, reveal a tailored three-chapter reading route with estimated times, key questions, progress markers, and a reset control. Add JavaScript that changes the route from structured data, marks chapters complete, updates total progress, and reflects the chosen path in the URL hash.