Back to marketing components
FAQs
Selection of FAQ components created with Tailwind CSS, featuring responsive design, interactive toggles, and customizable styling. Perfect for websites, landing pages, and knowledge bases to improve user experience and SEO through structured question-answer formats.
3/3 Dark Mode Updated: Jul 4, 2026
<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
aria-hidden="true"
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
aria-hidden="true"
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
aria-hidden="true"
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 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 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
>
<h2 class="text-lg font-medium">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>
<svg
aria-hidden="true"
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 dark:text-white">
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 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
>
<h2 class="text-lg font-medium">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>
<svg
aria-hidden="true"
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 dark:text-white">
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 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
>
<h2 class="text-lg font-medium">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>
<svg
aria-hidden="true"
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 dark:text-white">
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 class="flow-root">
<div class="-my-4 flex flex-col divide-y divide-gray-200">
<details class="group py-4 [&_summary::-webkit-details-marker]:hidden" open>
<summary class="flex items-center justify-between gap-1.5 text-gray-900">
<h2 class="text-lg font-medium">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>
<svg
aria-hidden="true"
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="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 py-4 [&_summary::-webkit-details-marker]:hidden">
<summary class="flex items-center justify-between gap-1.5 text-gray-900">
<h2 class="text-lg font-medium">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>
<svg
aria-hidden="true"
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="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 py-4 [&_summary::-webkit-details-marker]:hidden">
<summary class="flex items-center justify-between gap-1.5 text-gray-900">
<h2 class="text-lg font-medium">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>
<svg
aria-hidden="true"
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="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 class="flow-root">
<div class="-my-4 flex flex-col divide-y divide-gray-200 dark:divide-gray-700">
<details class="group py-4 [&_summary::-webkit-details-marker]:hidden" open>
<summary class="flex items-center justify-between gap-1.5 text-gray-900 dark:text-white">
<h2 class="text-lg font-medium">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>
<svg
aria-hidden="true"
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="pt-4 text-gray-900 dark:text-white">
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 py-4 [&_summary::-webkit-details-marker]:hidden">
<summary class="flex items-center justify-between gap-1.5 text-gray-900 dark:text-white">
<h2 class="text-lg font-medium">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>
<svg
aria-hidden="true"
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="pt-4 text-gray-900 dark:text-white">
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 py-4 [&_summary::-webkit-details-marker]:hidden">
<summary class="flex items-center justify-between gap-1.5 text-gray-900 dark:text-white">
<h2 class="text-lg font-medium">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>
<svg
aria-hidden="true"
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="pt-4 text-gray-900 dark:text-white">
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 class="space-y-4">
<details
class="group border-s-4 border-gray-200 bg-gray-50 p-4 [&_summary::-webkit-details-marker]:hidden"
open
>
<summary class="flex items-center justify-between gap-1.5 text-gray-900">
<h2 class="text-lg font-medium">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>
<svg
aria-hidden="true"
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="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 border-s-4 border-gray-200 bg-gray-50 p-4 [&_summary::-webkit-details-marker]:hidden"
>
<summary class="flex items-center justify-between gap-1.5 text-gray-900">
<h2 class="text-lg font-medium">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>
<svg
aria-hidden="true"
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="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 border-s-4 border-gray-200 bg-gray-50 p-4 [&_summary::-webkit-details-marker]:hidden"
>
<summary class="flex items-center justify-between gap-1.5 text-gray-900">
<h2 class="text-lg font-medium">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>
<svg
aria-hidden="true"
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="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 class="space-y-4">
<details
class="group border-s-4 border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800 [&_summary::-webkit-details-marker]:hidden"
open
>
<summary class="flex items-center justify-between gap-1.5 text-gray-900 dark:text-white">
<h2 class="text-lg font-medium">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>
<svg
aria-hidden="true"
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="pt-4 text-gray-900 dark:text-white">
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 border-s-4 border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800 [&_summary::-webkit-details-marker]:hidden"
>
<summary class="flex items-center justify-between gap-1.5 text-gray-900 dark:text-white">
<h2 class="text-lg font-medium">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>
<svg
aria-hidden="true"
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="pt-4 text-gray-900 dark:text-white">
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 border-s-4 border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800 [&_summary::-webkit-details-marker]:hidden"
>
<summary class="flex items-center justify-between gap-1.5 text-gray-900 dark:text-white">
<h2 class="text-lg font-medium">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>
<svg
aria-hidden="true"
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="pt-4 text-gray-900 dark:text-white">
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>