Heading left, questions right
Create a two-column FAQ layout with Tailwind CSS: on the left a sticky heading block with a title, a short intro, and a "Contact support" link; on the right a stacked list of question/answer pairs (static, no accordion). Stack to one column on mobile.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the finished markup? .
Create a two-column FAQ layout with Tailwind CSS: on the left a sticky heading block with a title, a short intro, and a "Contact support" link; on the right a stacked list of question/answer pairs (static, no accordion). Stack to one column on mobile.<section class="mx-auto grid max-w-5xl gap-12 px-6 py-16 lg:grid-cols-3">
<div class="lg:sticky lg:top-24 lg:self-start">
<h2 class="text-2xl font-semibold text-neutral-900">Questions & answers</h2>
<p class="mt-2 text-sm text-neutral-500">Everything you need to know before getting started.</p>
<a href="#" class="mt-4 inline-block text-sm font-medium text-neutral-900 hover:underline">Still stuck? Contact support →</a>
</div>
<div class="space-y-8 lg:col-span-2">
<div>
<h3 class="text-sm font-medium text-neutral-900">What payment methods do you accept?</h3>
<p class="mt-2 text-sm text-neutral-500">All major credit cards, and invoicing on annual plans.</p>
</div>
<div>
<h3 class="text-sm font-medium text-neutral-900">Can I change plans later?</h3>
<p class="mt-2 text-sm text-neutral-500">Upgrade or downgrade anytime; changes are prorated automatically.</p>
</div>
<div>
<h3 class="text-sm font-medium text-neutral-900">Do you offer discounts for nonprofits?</h3>
<p class="mt-2 text-sm text-neutral-500">Yes — reach out and we'll set you up with a nonprofit rate.</p>
</div>
</div>
</section>