Create an inline-definition FAQ with Tailwind CSS for a technical product. Present a short introductory paragraph containing highlighted terms; clicking a term updates a definition panel with the plain-language meaning, practical example, related terms, and a documentation link. Add JavaScript for mouse and keyboard selection, active styling, and URL hash updates so definitions can be linked directly.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Create an inline-definition FAQ with Tailwind CSS for a technical product. Present a short introductory paragraph containing highlighted terms; clicking a term updates a definition panel with the plain-language meaning, practical example, related terms, and a documentation link. Add JavaScript for mouse and keyboard selection, active styling, and URL hash updates so definitions can be linked directly.
<div class="mx-auto max-w-4xl p-6"><section class="grid overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-sm md:grid-cols-[1.1fr_0.9fr]"><div class="p-6 md:p-8"><p class="text-xs font-semibold uppercase tracking-wider text-neutral-400">Terms in context</p><h2 class="mt-3 text-2xl font-semibold text-neutral-900">Understand the system as you read.</h2><p class="mt-6 text-lg leading-9 text-neutral-600">An <button data-term="event" class="rounded bg-amber-100 px-1.5 text-neutral-900">event</button> enters a <button data-term="queue" class="rounded bg-neutral-100 px-1.5 text-neutral-900">queue</button>, where a <button data-term="consumer" class="rounded bg-neutral-100 px-1.5 text-neutral-900">consumer</button> processes it. If processing fails, the configured <button data-term="retry" class="rounded bg-neutral-100 px-1.5 text-neutral-900">retry policy</button> decides what happens next.</p><p class="mt-5 text-sm text-neutral-400">Select a highlighted term for its definition.</p></div><aside class="bg-neutral-950 p-6 text-white md:p-8"><p id="definitionKind" class="text-xs font-semibold uppercase tracking-wider text-violet-300"></p><h3 id="definitionTitle" class="mt-3 text-2xl font-semibold"></h3><p id="definitionBody" class="mt-4 text-sm leading-6 text-white/60"></p><div class="mt-6 rounded-xl bg-white/5 p-4"><p class="text-[10px] uppercase tracking-wider text-white/35">In practice</p><p id="definitionExample" class="mt-2 text-sm text-white/75"></p></div><p id="definitionRelated" class="mt-5 text-xs text-white/40"></p><a href="#" class="mt-6 inline-block text-sm font-medium text-violet-300">Open documentation →</a></aside></section></div>
var definitions = { event: ["Core concept", "Event", "A durable record that something happened in your product or system.", "order.paid records the moment a payment succeeds.", "Related: payload, schema"], queue: ["Delivery", "Queue", "An ordered buffer that separates producing work from processing it.", "A traffic spike waits safely instead of overwhelming your worker.", "Related: partition, retention"], consumer: ["Processing", "Consumer", "A service that reads events and performs work in response.", "The email consumer sends a receipt after order.paid arrives.", "Related: worker, acknowledgement"], retry: ["Reliability", "Retry policy", "Rules controlling when and how failed work is attempted again.", "Transient failures retry with increasing delays before dead-lettering.", "Related: backoff, dead-letter queue"] }; var buttons = [].slice.call(document.querySelectorAll("[data-term]")); function showDefinition(key) { var item = definitions[key] || definitions.event; document.getElementById("definitionKind").textContent = item[0]; document.getElementById("definitionTitle").textContent = item[1]; document.getElementById("definitionBody").textContent = item[2]; document.getElementById("definitionExample").textContent = item[3]; document.getElementById("definitionRelated").textContent = item[4]; buttons.forEach(function (button) { button.className = button.getAttribute("data-term") === key ? "rounded bg-amber-200 px-1.5 text-neutral-900 ring-2 ring-amber-400/30" : "rounded bg-neutral-100 px-1.5 text-neutral-900"; }); history.replaceState(null, "", "#" + key); } buttons.forEach(function (button) { button.addEventListener("click", function () { showDefinition(button.getAttribute("data-term")); }); }); showDefinition(location.hash.slice(1));
