Create an FAQ presented as a card grid with Tailwind CSS: a heading and intro, then a responsive grid of question cards where each card has a small numbered badge, a bold question, and a two or three line answer. Make the final grid cell a contrasting dark support tile with a short prompt, an avatar pair, and a light CTA button for contacting the team. Keep card heights even with flex and give the dark tile the same corner radius.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Create an FAQ presented as a card grid with Tailwind CSS: a heading and intro, then a responsive grid of question cards where each card has a small numbered badge, a bold question, and a two or three line answer. Make the final grid cell a contrasting dark support tile with a short prompt, an avatar pair, and a light CTA button for contacting the team. Keep card heights even with flex and give the dark tile the same corner radius.
<section class="mx-auto max-w-6xl px-6 py-16">
<div class="mx-auto mb-10 max-w-xl text-center">
<h2 class="text-3xl font-semibold text-neutral-900">Before you ask</h2>
<p class="mt-2 text-neutral-500">The four questions that come up in almost every trial.</p>
</div>
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
<div class="rounded-2xl border border-neutral-200 bg-white p-6">
<span class="flex h-7 w-7 items-center justify-center rounded-lg bg-neutral-100 text-xs font-semibold text-neutral-500">01</span>
<h3 class="mt-4 font-semibold text-neutral-900">Do you have a migration path?</h3>
<p class="mt-2 text-sm leading-relaxed text-neutral-500">We import from the four largest competitors, including custom fields and attachments. Most migrations finish in under an hour.</p>
</div>
<div class="rounded-2xl border border-neutral-200 bg-white p-6">
<span class="flex h-7 w-7 items-center justify-center rounded-lg bg-neutral-100 text-xs font-semibold text-neutral-500">02</span>
<h3 class="mt-4 font-semibold text-neutral-900">Where is my data stored?</h3>
<p class="mt-2 text-sm leading-relaxed text-neutral-500">Choose a region at workspace creation: US, EU, or AU. Data never leaves the region you pick, including backups.</p>
</div>
<div class="rounded-2xl border border-neutral-200 bg-white p-6">
<span class="flex h-7 w-7 items-center justify-center rounded-lg bg-neutral-100 text-xs font-semibold text-neutral-500">03</span>
<h3 class="mt-4 font-semibold text-neutral-900">What happens after the trial?</h3>
<p class="mt-2 text-sm leading-relaxed text-neutral-500">Nothing is deleted. Your workspace drops to the free tier and everything stays readable until you upgrade.</p>
</div>
<div class="rounded-2xl border border-neutral-200 bg-white p-6">
<span class="flex h-7 w-7 items-center justify-center rounded-lg bg-neutral-100 text-xs font-semibold text-neutral-500">04</span>
<h3 class="mt-4 font-semibold text-neutral-900">Is there an on-premise option?</h3>
<p class="mt-2 text-sm leading-relaxed text-neutral-500">Self-hosting is available on Enterprise with a Helm chart and quarterly release channel.</p>
</div>
<div class="flex flex-col justify-between rounded-2xl bg-neutral-900 p-6 md:col-span-2 lg:col-span-1">
<div>
<h3 class="font-semibold text-white">Still unanswered?</h3>
<p class="mt-2 text-sm leading-relaxed text-neutral-400">Ask a solutions engineer directly — no forms, no queue, no discovery call.</p>
</div>
<div class="mt-6 flex items-center justify-between">
<div class="flex -space-x-2">
<span class="h-8 w-8 rounded-full bg-neutral-700 ring-2 ring-neutral-900"></span>
<span class="h-8 w-8 rounded-full bg-neutral-600 ring-2 ring-neutral-900"></span>
</div>
<a href="#" class="rounded-xl bg-white px-4 py-2 text-sm font-medium text-neutral-900 hover:bg-neutral-100">Ask us</a>
</div>
</div>
</div>
</section>
