All Prompts
All Prompts

faqaccordiondetails-summarytailwindresponsivesectioninteractivegrid
Responsive FAQ Accordion Section
Адаптивный FAQ-аккордеон на Tailwind CSS. Отображает вопросы и ответы в виде раскрывающихся блоков, подходит для сайтов и хелп-центров.
Prompt
<section class="relative w-full">
<div class="max-w-7xl mr-auto ml-auto pt-14 pr-6 pb-14 pl-6">
<div class="max-w-2xl">
<h2 class="text-2xl sm:text-3xl font-semibold tracking-tight">Frequently asked questions</h2>
<p class="mt-2 text-neutral-300/90">Can’t find what you’re looking for? Reach out to our team.</p>
</div>
<div class="mt-8 grid gap-4 md:grid-cols-2">
<details class="rounded-2xl bg-white/5 ring-1 ring-white/10 p-5">
<summary class="cursor-pointer list-none flex items-center justify-between">
<span class="text-sm font-medium">How does the free trial work?</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="chevron-down" class="lucide lucide-chevron-down h-4 w-4 text-neutral-400"
style="stroke-width:1.5;">
<path d="m6 9 6 6 6-6" class=""></path>
</svg>
</summary>
<p class="mt-3 text-sm text-neutral-300">
Start with full access for 14 days—no credit card required. Upgrade anytime and keep your projects intact.
</p>
</details>
<details class="rounded-2xl bg-white/5 ring-1 ring-white/10 p-5">
<summary class="cursor-pointer list-none flex items-center justify-between">
<span class="text-sm font-medium">Do you support custom domains?</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="chevron-down" class="lucide lucide-chevron-down h-4 w-4 text-neutral-400"
style="stroke-width:1.5;">
<path d="m6 9 6 6 6-6" class=""></path>
</svg>
</summary>
<p class="mt-3 text-sm text-neutral-300">
Yes. Add and verify your domain in minutes. Automatic SSL is included.
</p>
</details>
<details class="rounded-2xl bg-white/5 ring-1 ring-white/10 p-5">
<summary class="cursor-pointer list-none flex items-center justify-between">
<span class="text-sm font-medium">What payment methods do you accept?</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="chevron-down" class="lucide lucide-chevron-down h-4 w-4 text-neutral-400"
style="stroke-width:1.5;">
<path d="m6 9 6 6 6-6" class=""></path>
</svg>
</summary>
<p class="mt-3 text-sm text-neutral-300">
We accept major credit cards and invoices for Enterprise plans.
</p>
</details>
<details class="rounded-2xl bg-white/5 ring-1 ring-white/10 p-5">
<summary class="cursor-pointer list-none flex items-center justify-between">
<span class="text-sm font-medium">Is there an on-prem option?</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="chevron-down" class="lucide lucide-chevron-down h-4 w-4 text-neutral-400"
style="stroke-width:1.5;">
<path d="m6 9 6 6 6-6" class=""></path>
</svg>
</summary>
<p class="mt-3 text-sm text-neutral-300">
Yes. Contact sales for deployment options tailored to your security requirements.
</p>
</details>
</div>
</div>
</section>