Build a guided troubleshooting widget with Tailwind CSS. Use a max-w-xl bordered card with a heading reading "Let us narrow it down", a muted subline, and a breadcrumb row of answered steps rendered as small pills with the chosen answers and a reset link on the right. The body shows one question at a time: a question in medium weight and two or three full-width answer buttons as bordered rows with a chevron. The final state replaces the question with a resolution panel — a tinted box with a title, two paragraphs, a monospaced command where relevant, and two buttons for marking it solved or contacting support. Then add JavaScript holding the tree as a nested object, rendering the current node, appending each answer to the breadcrumb, allowing a click on any breadcrumb pill to rewind to that point, and resetting the whole flow from the reset link.
Build a guided troubleshooting widget with Tailwind CSS. Use a max-w-xl bordered card with a heading reading "Let us narrow it down", a muted subline, and a breadcrumb row of answered steps rendered as small pills with the chosen answers and a reset link on the right. The body shows one question at a time: a question in medium weight and two or three full-width answer buttons as bordered rows with a chevron. The final state replaces the question with a resolution panel — a tinted box with a title, two paragraphs, a monospaced command where relevant, and two buttons for marking it solved or contacting support. Then add JavaScript holding the tree as a nested object, rendering the current node, appending each answer to the breadcrumb, allowing a click on any breadcrumb pill to rewind to that point, and resetting the whole flow from the reset link.
<section class="mx-auto max-w-xl px-6 py-14">
<div class="rounded-2xl border border-neutral-200 bg-white p-7">
<h2 class="text-xl font-semibold tracking-tight text-neutral-900">Let us narrow it down</h2>
<p class="mt-1.5 text-sm text-neutral-500">Three questions at most. Nothing is sent anywhere until you ask for support.</p>
<div class="mt-5 flex flex-wrap items-center gap-2">
<div id="treeCrumbs" class="flex flex-wrap gap-1.5"></div>
<button id="treeReset" class="ml-auto text-xs text-neutral-500 underline-offset-4 hover:text-neutral-900 hover:underline">Start over</button>
</div>
<div id="treeBody" class="mt-6"></div>
</div>
</section>
Build a guided troubleshooting widget with Tailwind CSS. Use a max-w-xl bordered card with a heading reading "Let us narrow it down", a muted subline, and a breadcrumb row of answered steps rendered as small pills with the chosen answers and a reset link on the right. The body shows one question at a time: a question in medium weight and two or three full-width answer buttons as bordered rows with a chevron. The final state replaces the question with a resolution panel — a tinted box with a title, two paragraphs, a monospaced command where relevant, and two buttons for marking it solved or contacting support. Then add JavaScript holding the tree as a nested object, rendering the current node, appending each answer to the breadcrumb, allowing a click on any breadcrumb pill to rewind to that point, and resetting the whole flow from the reset link.