Answer terminology questions inside a readable glossary
Live preview
The prompt
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.
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>
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.