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.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
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>
var routes = { migration: { title: "The reversible migration", intro: "A route for sequencing dependencies, rehearsing rollback, and protecting customer continuity.", chapters: [["Map the living system", "8 min", "Where does hidden coupling live?"], ["Design the reversal", "11 min", "What signal should stop the rollout?"], ["Move in observable slices", "9 min", "How small can the next safe change be?"]] }, leadership: { title: "Leading through ambiguity", intro: "A route for building shared context, decision rights, and a sustainable communication rhythm.", chapters: [["Name what is known", "6 min", "Which facts are stable enough to act on?"], ["Clarify decision ownership", "10 min", "Who decides, advises, and executes?"], ["Build the listening loop", "8 min", "Where can weak signals reach leaders?"]] }, risk: { title: "Evidence before commitment", intro: "A route for finding assumptions, pricing uncertainty, and testing the highest-cost failure first.", chapters: [["Inventory the assumptions", "7 min", "What must be true for this to work?"], ["Price the downside", "9 min", "Which failure is hardest to reverse?"], ["Run the smallest proof", "12 min", "What evidence would change the decision?"]] } }; var route = document.getElementById("pathRoute"); var completed = new Set(); function renderPath(key) { var data = routes[key]; if (!data) return; completed.clear(); document.getElementById("pathChooser").classList.add("hidden"); route.classList.remove("hidden"); document.getElementById("pathTitle").textContent = data.title; document.getElementById("pathIntro").textContent = data.intro; document.getElementById("pathChapters").innerHTML = data.chapters.map(function (chapter, index) { return '<li class="rounded-2xl border border-neutral-300 bg-white p-5"><div class="flex gap-4"><span class="font-mono text-xs text-neutral-400">0' + (index + 1) + '</span><div class="flex-1"><div class="flex justify-between gap-3"><h3 class="font-medium">' + chapter[0] + '</h3><span class="text-xs text-neutral-400">' + chapter[1] + '</span></div><p class="mt-2 text-sm text-neutral-500">' + chapter[2] + '</p><button data-complete-chapter="' + index + '" class="mt-4 text-xs font-medium text-blue-700">Mark chapter complete</button></div></div></li>'; }).join(""); history.replaceState(null, "", "#" + key); syncPath(); } function syncPath() { var total = 3; document.getElementById("pathProgress").style.width = completed.size / total * 100 + "%"; document.getElementById("pathStatus").textContent = completed.size + " of " + total + " chapters complete"; } document.querySelectorAll("[data-path]").forEach(function (button) { button.addEventListener("click", function () { renderPath(button.getAttribute("data-path")); }); }); document.getElementById("pathChapters").addEventListener("click", function (event) { var button = event.target.closest("[data-complete-chapter]"); if (!button) return; var index = button.getAttribute("data-complete-chapter"); if (completed.has(index)) completed.delete(index); else completed.add(index); button.textContent = completed.has(index) ? "Completed ✓" : "Mark chapter complete"; syncPath(); }); document.getElementById("pathReset").addEventListener("click", function () { route.classList.add("hidden"); document.getElementById("pathChooser").classList.remove("hidden"); history.replaceState(null, "", location.pathname); }); if (routes[location.hash.slice(1)]) renderPath(location.hash.slice(1));
