Build a version-aware FAQ with Tailwind CSS. Include a product-version selector, search field, answer cards tagged by applicable versions, and a visible changed-in-this-release callout. Add JavaScript that filters answers by both selected version and query, updates result counts, highlights release changes, and shows a helpful empty state.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Build a version-aware FAQ with Tailwind CSS. Include a product-version selector, search field, answer cards tagged by applicable versions, and a visible changed-in-this-release callout. Add JavaScript that filters answers by both selected version and query, updates result counts, highlights release changes, and shows a helpful empty state.
<div class="mx-auto max-w-3xl p-6"><section class="rounded-2xl border border-neutral-200 bg-white p-6 shadow-sm"><div class="flex flex-col justify-between gap-4 sm:flex-row sm:items-end"><div><p class="text-xs font-semibold uppercase tracking-wider text-neutral-400">Product help</p><h2 class="mt-2 text-2xl font-semibold text-neutral-900">Answers for your release</h2></div><select id="faqVersion" class="rounded-xl border border-neutral-200 px-3 py-2.5 text-sm"><option value="4.2">Version 4.2</option><option value="4.1">Version 4.1</option><option value="4.0">Version 4.0</option></select></div><input id="releaseFaqSearch" type="search" placeholder="Search configuration, migration, permissions" class="mt-6 w-full rounded-xl border border-neutral-200 px-4 py-3 text-sm outline-none focus:border-neutral-900" /><div class="mt-3 flex justify-between text-xs text-neutral-400"><span id="releaseFaqCount"></span><span>Answers update with your version</span></div><div id="releaseFaqList" class="mt-5 space-y-3"><article data-answer data-versions="4.2" data-changed="4.2" class="rounded-xl border border-violet-200 bg-violet-50 p-4"><div class="flex justify-between gap-3"><h3 class="text-sm font-semibold text-neutral-900">Where did environment rules move?</h3><span data-change class="rounded-full bg-violet-100 px-2 py-1 text-[10px] text-violet-700">Changed in 4.2</span></div><p class="mt-2 text-sm leading-6 text-neutral-600">Rules now live under Project settings → Environments, with inherited policies shown first.</p></article><article data-answer data-versions="4.2 4.1" class="rounded-xl border border-neutral-200 p-4"><h3 class="text-sm font-semibold text-neutral-900">How do I export an audit log?</h3><p class="mt-2 text-sm leading-6 text-neutral-600">Open Organization settings, choose Audit, set a date range, then select Export CSV.</p></article><article data-answer data-versions="4.2 4.1 4.0" class="rounded-xl border border-neutral-200 p-4"><h3 class="text-sm font-semibold text-neutral-900">Can project roles be customized?</h3><p class="mt-2 text-sm leading-6 text-neutral-600">Enterprise workspaces can create custom roles from organization access settings.</p></article><article data-answer data-versions="4.1 4.0" class="rounded-xl border border-neutral-200 p-4"><h3 class="text-sm font-semibold text-neutral-900">Where are environment policies?</h3><p class="mt-2 text-sm leading-6 text-neutral-600">In these releases, policies appear in the Security section of workspace settings.</p></article></div><div id="releaseFaqEmpty" class="mt-5 hidden rounded-xl border border-dashed border-neutral-200 p-8 text-center text-sm text-neutral-500">No answers match this version and search.</div></section></div>
var version = document.getElementById("faqVersion"); var search = document.getElementById("releaseFaqSearch"); var answers = [].slice.call(document.querySelectorAll("[data-answer]")); function filterReleaseFaq() { var query = search.value.trim().toLowerCase(); var shown = 0; answers.forEach(function (answer) { var matchesVersion = answer.getAttribute("data-versions").split(" ").indexOf(version.value) !== -1; var matchesQuery = !query || answer.textContent.toLowerCase().indexOf(query) !== -1; var visible = matchesVersion && matchesQuery; answer.classList.toggle("hidden", !visible); if (visible) shown += 1; var badge = answer.querySelector("[data-change]"); if (badge) badge.classList.toggle("hidden", answer.getAttribute("data-changed") !== version.value); }); document.getElementById("releaseFaqCount").textContent = shown + (shown === 1 ? " answer" : " answers"); document.getElementById("releaseFaqEmpty").classList.toggle("hidden", shown > 0); } version.addEventListener("change", filterReleaseFaq); search.addEventListener("input", filterReleaseFaq); filterReleaseFaq();
