faqsBeginneranimation
FAQ Accordion List
A list of FAQ items using native <details> for expand/collapse.
Claude prompt
Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.
Build an FAQ list with Tailwind using <details>/<summary>: a centered max-width container with section heading, then a list of <details> elements where each summary is a question + chevron and the body is the answer paragraph. The chevron rotates 180° when open.
Code
html
<!--
Source: Mark Mead (HyperUI)
https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/faqs/1.html
License: MIT
Surfaced via https://vibedex.io/components/hyperui-marketing-faq
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
<div class="mx-auto max-w-3xl p-6 w-full">
<div class="space-y-4">
<details class="group [&_summary::-webkit-details-marker]:hidden" open>
<summary
class="flex items-center justify-between gap-1.5 rounded-md border border-gray-100 bg-gray-50 p-4 text-gray-900"
>
<h2 class="text-lg font-medium">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>
<svg
class="size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<p class="px-4 pt-4 text-gray-900">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab hic veritatis molestias culpa
in, recusandae laboriosam neque aliquid libero nesciunt voluptate dicta quo officiis
explicabo consequuntur distinctio corporis earum similique!
</p>
</details>
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex items-center justify-between gap-1.5 rounded-md border border-gray-100 bg-gray-50 p-4 text-gray-900"
>
<h2 class="text-lg font-medium">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>
<svg
class="size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<p class="px-4 pt-4 text-gray-900">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab hic veritatis molestias culpa
in, recusandae laboriosam neque aliquid libero nesciunt voluptate dicta quo officiis
explicabo consequuntur distinctio corporis earum similique!
</p>
</details>
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex items-center justify-between gap-1.5 rounded-md border border-gray-100 bg-gray-50 p-4 text-gray-900"
>
<h2 class="text-lg font-medium">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>
<svg
class="size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<p class="px-4 pt-4 text-gray-900">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab hic veritatis molestias culpa
in, recusandae laboriosam neque aliquid libero nesciunt voluptate dicta quo officiis
explicabo consequuntur distinctio corporis earum similique!
</p>
</details>
</div>
</div>
</div>