Design a support FAQ with Tailwind CSS in a two-column layout. The wide left column holds a heading, a muted subline and six accordion questions as bordered cards with a plus that rotates; two answers include an inline bordered callout with a glyph and one sentence of extra caution. The narrow right column is a sticky rail containing three stacked cards: a "Popular articles" card listing five links with small chevrons, a "Still stuck?" card with a support email, a live chat button and the current median reply time, and a compact "Status" card showing a green dot with an operational line and a link to the status page. Stack the rail below the questions on small screens, and keep the rail cards visually lighter than the questions so the hierarchy is obvious.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Design a support FAQ with Tailwind CSS in a two-column layout. The wide left column holds a heading, a muted subline and six accordion questions as bordered cards with a plus that rotates; two answers include an inline bordered callout with a glyph and one sentence of extra caution. The narrow right column is a sticky rail containing three stacked cards: a "Popular articles" card listing five links with small chevrons, a "Still stuck?" card with a support email, a live chat button and the current median reply time, and a compact "Status" card showing a green dot with an operational line and a link to the status page. Stack the rail below the questions on small screens, and keep the rail cards visually lighter than the questions so the hierarchy is obvious.
<section class="mx-auto max-w-6xl px-6 py-16">
<div class="grid gap-10 lg:grid-cols-[1fr_300px]">
<div>
<h1 class="text-3xl font-semibold tracking-tight text-neutral-900">Common questions</h1>
<p class="mt-2 text-neutral-500">If the answer here does not fit your case, the docs go considerably deeper.</p>
<div class="mt-8 space-y-3">
<details class="group rounded-xl border border-neutral-200 bg-white px-5">
<summary class="flex cursor-pointer list-none items-center justify-between gap-4 py-4">
<span class="text-sm font-medium text-neutral-900">How do I rotate an API key without downtime?</span>
<span class="text-neutral-400 transition-transform group-open:rotate-45"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M12 5v14M5 12h14"/></svg></span>
</summary>
<div class="pb-5 text-sm leading-relaxed text-neutral-500">
<p>Create the second key first, deploy it, then revoke the old one. Both work simultaneously, so there is no window where requests fail.</p>
<p class="mt-3 flex gap-2 rounded-lg border border-amber-200 bg-amber-50 p-3 text-xs text-amber-800"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M4.5 18a9 9 0 1 1 15 0"/><path d="m12 14 4-4"/><path d="M8 18h8"/></svg> <span>Revoking takes effect within five seconds across every region — there is no grace period.</span></p>
</div>
</details>
<details class="group rounded-xl border border-neutral-200 bg-white px-5">
<summary class="flex cursor-pointer list-none items-center justify-between gap-4 py-4">
<span class="text-sm font-medium text-neutral-900">Why does my export have fewer rows than the dashboard?</span>
<span class="text-neutral-400 transition-transform group-open:rotate-45"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M12 5v14M5 12h14"/></svg></span>
</summary>
<p class="pb-5 text-sm leading-relaxed text-neutral-500">Exports apply your row-level access rules, dashboards apply the report owner rules. If they differ, the export is the one telling the truth about your permissions.</p>
</details>
<details class="group rounded-xl border border-neutral-200 bg-white px-5">
<summary class="flex cursor-pointer list-none items-center justify-between gap-4 py-4">
<span class="text-sm font-medium text-neutral-900">Can I run two syncs against the same table?</span>
<span class="text-neutral-400 transition-transform group-open:rotate-45"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M12 5v14M5 12h14"/></svg></span>
</summary>
<p class="pb-5 text-sm leading-relaxed text-neutral-500">Yes, provided they use different cursors. Two syncs sharing a cursor will leapfrog each other and both will miss rows.</p>
</details>
<details class="group rounded-xl border border-neutral-200 bg-white px-5">
<summary class="flex cursor-pointer list-none items-center justify-between gap-4 py-4">
<span class="text-sm font-medium text-neutral-900">What happens to scheduled reports when someone leaves?</span>
<span class="text-neutral-400 transition-transform group-open:rotate-45"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M12 5v14M5 12h14"/></svg></span>
</summary>
<div class="pb-5 text-sm leading-relaxed text-neutral-500">
<p>They keep running under the workspace service identity, and ownership transfers to the workspace admin. Recipients are untouched.</p>
<p class="mt-3 flex gap-2 rounded-lg border border-amber-200 bg-amber-50 p-3 text-xs text-amber-800"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M4.5 18a9 9 0 1 1 15 0"/><path d="m12 14 4-4"/><path d="M8 18h8"/></svg> <span>Reports scoped to that person row-level rules will return fewer rows after the transfer. Check them.</span></p>
</div>
</details>
<details class="group rounded-xl border border-neutral-200 bg-white px-5">
<summary class="flex cursor-pointer list-none items-center justify-between gap-4 py-4">
<span class="text-sm font-medium text-neutral-900">Is there a sandbox I can break?</span>
<span class="text-neutral-400 transition-transform group-open:rotate-45"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M12 5v14M5 12h14"/></svg></span>
</summary>
<p class="pb-5 text-sm leading-relaxed text-neutral-500">Every workspace has a staging environment on the same plan with its own keys and its own data. Break it as often as you like.</p>
</details>
<details class="group rounded-xl border border-neutral-200 bg-white px-5">
<summary class="flex cursor-pointer list-none items-center justify-between gap-4 py-4">
<span class="text-sm font-medium text-neutral-900">How long do you keep deleted data?</span>
<span class="text-neutral-400 transition-transform group-open:rotate-45"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M12 5v14M5 12h14"/></svg></span>
</summary>
<p class="pb-5 text-sm leading-relaxed text-neutral-500">Soft-deleted for 30 days so you can undo, then removed from backups within a further 30. After that we genuinely cannot get it back.</p>
</details>
</div>
</div>
<aside class="space-y-4 lg:sticky lg:top-24 lg:self-start">
<div class="rounded-xl border border-neutral-200 bg-neutral-50 p-5">
<p class="text-xs font-semibold uppercase tracking-widest text-neutral-400">Popular articles</p>
<div class="mt-3 space-y-1">
<a href="#" class="flex items-center justify-between gap-2 rounded-lg px-2 py-2 text-sm text-neutral-600 transition hover:bg-white hover:text-neutral-900">Rotating credentials <span class="text-neutral-300">›</span></a>
<a href="#" class="flex items-center justify-between gap-2 rounded-lg px-2 py-2 text-sm text-neutral-600 transition hover:bg-white hover:text-neutral-900">Row-level access rules <span class="text-neutral-300">›</span></a>
<a href="#" class="flex items-center justify-between gap-2 rounded-lg px-2 py-2 text-sm text-neutral-600 transition hover:bg-white hover:text-neutral-900">Incremental syncs <span class="text-neutral-300">›</span></a>
<a href="#" class="flex items-center justify-between gap-2 rounded-lg px-2 py-2 text-sm text-neutral-600 transition hover:bg-white hover:text-neutral-900">Scheduling exports <span class="text-neutral-300">›</span></a>
<a href="#" class="flex items-center justify-between gap-2 rounded-lg px-2 py-2 text-sm text-neutral-600 transition hover:bg-white hover:text-neutral-900">Retention and deletion <span class="text-neutral-300">›</span></a>
</div>
</div>
<div class="rounded-xl border border-neutral-200 p-5">
<p class="text-sm font-medium text-neutral-900">Still stuck?</p>
<p class="mt-1.5 text-sm leading-relaxed text-neutral-500">Engineers answer support directly, 07:00–20:00 UTC on weekdays.</p>
<button class="mt-4 w-full rounded-xl bg-neutral-900 py-2.5 text-sm font-medium text-white transition hover:bg-neutral-800">Start a chat</button>
<a href="#" class="mt-2 block text-center text-xs text-neutral-500 underline-offset-4 hover:text-neutral-900 hover:underline">support@northwind.dev</a>
<p class="mt-3 text-center text-xs text-neutral-400">Median reply today: 34 minutes</p>
</div>
<div class="rounded-xl border border-neutral-200 p-5">
<p class="flex items-center gap-2 text-sm text-neutral-600"><span class="h-2 w-2 rounded-full bg-green-500"></span> All systems operational</p>
<a href="#" class="mt-2 block text-xs text-neutral-500 underline-offset-4 hover:text-neutral-900 hover:underline">status.northwind.dev <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M14 4h6v6M20 4l-9 9"/><path d="M18 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6"/></svg></a>
</div>
</aside>
</div>
</section>
