forum discussion community topics search tags social forum discussion community topics threads tags search replies board community forum with topics and tags discussion board with search and sidebar
Forum Base
Fetch pattern JSON:
curl https://webspire.de/patterns/forum/base.json base.html
<section class="ws-forum bg-[var(--ws-color-surface)] py-16">
<div class="mx-auto max-w-6xl px-6">
<div class="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
<div>
<h2 class="text-3xl font-bold text-slate-900">Community Forum</h2>
<p class="mt-1 text-lg text-slate-500">Ask questions, share ideas, and connect with others.</p>
</div>
<a href="#" class="inline-flex items-center gap-2 rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
New Topic
</a>
</div>
<!-- Search Bar -->
<div class="mt-6">
<label for="forum-search" class="sr-only">Search topics</label>
<div class="relative">
<svg class="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
<input id="forum-search" type="search" placeholder="Search topics..." class="w-full rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] py-3 pl-10 pr-4 text-sm text-slate-900 placeholder-slate-400 transition focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 dark:focus:border-indigo-400">
</div>
</div>
<div class="mt-8 grid grid-cols-1 gap-8 lg:grid-cols-4">
<!-- Topic List -->
<div class="lg:col-span-3">
<ul class="divide-y divide-slate-100">
<!-- Topic 1 -->
<li class="py-5">
<div class="flex items-start justify-between gap-4">
<div class="min-w-0 flex-1">
<a href="#" class="text-base font-semibold text-slate-900 hover:text-indigo-600 dark:hover:text-indigo-400">How to structure a Tailwind design system for large teams?</a>
<p class="mt-1 text-sm text-slate-500">Looking for advice on organizing utility classes, component patterns, and custom tokens across multiple product teams...</p>
<div class="mt-2 flex flex-wrap items-center gap-2">
<span class="rounded-full bg-blue-50 px-2.5 py-0.5 text-xs font-medium text-blue-700">design-systems</span>
<span class="rounded-full bg-emerald-50 px-2.5 py-0.5 text-xs font-medium text-emerald-700">tailwind</span>
<span class="ml-auto text-xs text-slate-400">
Alex K. · 24 replies · 312 views · <time datetime="2026-03-23">1d ago</time>
</span>
</div>
</div>
</div>
</li>
<!-- Topic 2 -->
<li class="py-5">
<div class="flex items-start justify-between gap-4">
<div class="min-w-0 flex-1">
<a href="#" class="text-base font-semibold text-slate-900 hover:text-indigo-600 dark:hover:text-indigo-400">Best practices for accessible accordion components</a>
<p class="mt-1 text-sm text-slate-500">I want to make sure my accordion follows ARIA patterns correctly. Should I use details/summary or custom JS with role attributes?</p>
<div class="mt-2 flex flex-wrap items-center gap-2">
<span class="rounded-full bg-violet-50 px-2.5 py-0.5 text-xs font-medium text-violet-700">accessibility</span>
<span class="rounded-full bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-700">components</span>
<span class="ml-auto text-xs text-slate-400">
Maria L. · 18 replies · 245 views · <time datetime="2026-03-22">2d ago</time>
</span>
</div>
</div>
</div>
</li>
<!-- Topic 3 -->
<li class="py-5">
<div class="flex items-start justify-between gap-4">
<div class="min-w-0 flex-1">
<a href="#" class="text-base font-semibold text-slate-900 hover:text-indigo-600 dark:hover:text-indigo-400">CSS vs. JS animations — performance comparison 2026</a>
<p class="mt-1 text-sm text-slate-500">Has anyone benchmarked CSS animations against WAAPI or Framer Motion on modern browsers? Specifically interested in stagger effects...</p>
<div class="mt-2 flex flex-wrap items-center gap-2">
<span class="rounded-full bg-rose-50 px-2.5 py-0.5 text-xs font-medium text-rose-700">animations</span>
<span class="rounded-full bg-blue-50 px-2.5 py-0.5 text-xs font-medium text-blue-700">performance</span>
<span class="ml-auto text-xs text-slate-400">
Jonas T. · 31 replies · 489 views · <time datetime="2026-03-21">3d ago</time>
</span>
</div>
</div>
</div>
</li>
<!-- Topic 4 -->
<li class="py-5">
<div class="flex items-start justify-between gap-4">
<div class="min-w-0 flex-1">
<a href="#" class="text-base font-semibold text-slate-900 hover:text-indigo-600 dark:hover:text-indigo-400">Sharing my hero pattern collection — feedback welcome</a>
<p class="mt-1 text-sm text-slate-500">Built 8 hero variants using only Tailwind classes. Responsive, dark mode ready, no JS. Would love feedback from the community.</p>
<div class="mt-2 flex flex-wrap items-center gap-2">
<span class="rounded-full bg-emerald-50 px-2.5 py-0.5 text-xs font-medium text-emerald-700">showcase</span>
<span class="rounded-full bg-blue-50 px-2.5 py-0.5 text-xs font-medium text-blue-700">patterns</span>
<span class="ml-auto text-xs text-slate-400">
Sara N. · 42 replies · 631 views · <time datetime="2026-03-20">4d ago</time>
</span>
</div>
</div>
</div>
</li>
<!-- Topic 5 -->
<li class="py-5">
<div class="flex items-start justify-between gap-4">
<div class="min-w-0 flex-1">
<a href="#" class="text-base font-semibold text-slate-900 hover:text-indigo-600 dark:hover:text-indigo-400">MCP server setup for design system registries</a>
<p class="mt-1 text-sm text-slate-500">Exploring how to expose a component registry via MCP so AI coding assistants can discover and use patterns automatically...</p>
<div class="mt-2 flex flex-wrap items-center gap-2">
<span class="rounded-full bg-violet-50 px-2.5 py-0.5 text-xs font-medium text-violet-700">mcp</span>
<span class="rounded-full bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-700">ai</span>
<span class="ml-auto text-xs text-slate-400">
David R. · 15 replies · 198 views · <time datetime="2026-03-19">5d ago</time>
</span>
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- Sidebar -->
<aside class="lg:col-span-1">
<!-- Popular Tags -->
<div class="rounded-xl border border-slate-200 p-5">
<h3 class="text-sm font-semibold text-slate-900">Popular Tags</h3>
<div class="mt-3 flex flex-wrap gap-2">
<a href="#" class="rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-600 transition hover:bg-slate-200 dark:hover:bg-slate-700">tailwind</a>
<a href="#" class="rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-600 transition hover:bg-slate-200 dark:hover:bg-slate-700">css</a>
<a href="#" class="rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-600 transition hover:bg-slate-200 dark:hover:bg-slate-700">accessibility</a>
<a href="#" class="rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-600 transition hover:bg-slate-200 dark:hover:bg-slate-700">patterns</a>
<a href="#" class="rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-600 transition hover:bg-slate-200 dark:hover:bg-slate-700">design-systems</a>
<a href="#" class="rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-600 transition hover:bg-slate-200 dark:hover:bg-slate-700">animations</a>
<a href="#" class="rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-600 transition hover:bg-slate-200 dark:hover:bg-slate-700">components</a>
<a href="#" class="rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-600 transition hover:bg-slate-200 dark:hover:bg-slate-700">ai</a>
</div>
</div>
<!-- Recent Activity -->
<div class="mt-6 rounded-xl border border-slate-200 p-5">
<h3 class="text-sm font-semibold text-slate-900">Recent Activity</h3>
<ul class="mt-3 space-y-3">
<li>
<a href="#" class="text-sm text-slate-600 hover:text-indigo-600 dark:hover:text-indigo-400">Alex replied to "Tailwind design system"</a>
<p class="text-xs text-slate-400">2 hours ago</p>
</li>
<li>
<a href="#" class="text-sm text-slate-600 hover:text-indigo-600 dark:hover:text-indigo-400">Maria started "Accessible accordions"</a>
<p class="text-xs text-slate-400">5 hours ago</p>
</li>
<li>
<a href="#" class="text-sm text-slate-600 hover:text-indigo-600 dark:hover:text-indigo-400">Sara shared her hero collection</a>
<p class="text-xs text-slate-400">1 day ago</p>
</li>
<li>
<a href="#" class="text-sm text-slate-600 hover:text-indigo-600 dark:hover:text-indigo-400">David asked about MCP servers</a>
<p class="text-xs text-slate-400">2 days ago</p>
</li>
</ul>
</div>
</aside>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Experimental Draft
forumdiscussioncommunitytopicssearchtagssocial
Slots
| Name | Required | Description |
|---|---|---|
| header | Yes | Section title, subtitle, and new topic button. |
| search | Yes | Search input for filtering topics. |
| topic-list | Yes | List of topic rows with title, excerpt, tags, and metadata. |
| sidebar | No | Sidebar with popular tags and recent activity. |