Back to neobrutalism components
Accordions
Neobrutalism-style accordion components built with Tailwind CSS. Featuring thick borders, hard shadows, and bold typography. Perfect for adding a retro, high-contrast look to your FAQs, collapsible content, and information sections.
3/3 Dark Mode Updated: Jul 4, 2026
<div class="space-y-3">
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 border-2 border-black bg-white px-4 py-3 font-medium text-gray-900 shadow-[4px_4px_0_0] shadow-black hover:bg-yellow-200 focus:bg-yellow-200 focus:outline-0"
>
<span class="font-semibold">What are the basic features?</span>
<svg
aria-hidden="true"
class="size-5 shrink-0 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>
<div class="p-4">
<p class="text-black">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 border-2 border-black bg-white px-4 py-3 font-medium text-gray-900 shadow-[4px_4px_0_0] shadow-black hover:bg-yellow-200 focus:bg-yellow-200 focus:outline-0"
>
<span class="font-semibold">How do I get started?</span>
<svg
aria-hidden="true"
class="size-5 shrink-0 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>
<div class="p-4">
<p class="text-black">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 border-2 border-black bg-white px-4 py-3 font-medium text-gray-900 shadow-[4px_4px_0_0] shadow-black hover:bg-yellow-200 focus:bg-yellow-200 focus:outline-0"
>
<span class="font-semibold">What support options are available?</span>
<svg
aria-hidden="true"
class="size-5 shrink-0 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>
<div class="p-4">
<p class="text-black">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
</div><div class="space-y-3">
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 border-2 border-black bg-white px-4 py-3 font-medium text-gray-900 shadow-[4px_4px_0_0] shadow-black hover:bg-yellow-200 focus:bg-yellow-200 focus:outline-0 dark:border-white dark:bg-gray-900 dark:text-white dark:shadow-white dark:hover:bg-yellow-700 dark:focus:bg-yellow-700"
>
<span class="font-semibold">What are the basic features?</span>
<svg
aria-hidden="true"
class="size-5 shrink-0 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>
<div class="p-4">
<p class="text-black dark:text-white">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 border-2 border-black bg-white px-4 py-3 font-medium text-gray-900 shadow-[4px_4px_0_0] shadow-black hover:bg-yellow-200 focus:bg-yellow-200 focus:outline-0 dark:border-white dark:bg-gray-900 dark:text-white dark:shadow-white dark:hover:bg-yellow-700 dark:focus:bg-yellow-700"
>
<span class="font-semibold">How do I get started?</span>
<svg
aria-hidden="true"
class="size-5 shrink-0 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>
<div class="p-4">
<p class="text-black dark:text-white">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 border-2 border-black bg-white px-4 py-3 font-medium text-gray-900 shadow-[4px_4px_0_0] shadow-black hover:bg-yellow-200 focus:bg-yellow-200 focus:outline-0 dark:border-white dark:bg-gray-900 dark:text-white dark:shadow-white dark:hover:bg-yellow-700 dark:focus:bg-yellow-700"
>
<span class="font-semibold">What support options are available?</span>
<svg
aria-hidden="true"
class="size-5 shrink-0 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>
<div class="p-4">
<p class="text-black dark:text-white">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
</div><div class="space-y-3">
<details
class="group border-2 border-black shadow-[4px_4px_0_0] shadow-black [&_summary::-webkit-details-marker]:hidden"
>
<summary
class="flex cursor-pointer items-center justify-between gap-4 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-yellow-200 focus:bg-yellow-200 focus:outline-0"
>
<span class="font-semibold">What are the basic features?</span>
<svg
aria-hidden="true"
class="size-5 shrink-0 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>
<div class="border-t-2 border-black p-4">
<p class="text-black">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
<details
class="group border-2 border-black shadow-[4px_4px_0_0] shadow-black [&_summary::-webkit-details-marker]:hidden"
>
<summary
class="flex cursor-pointer items-center justify-between gap-4 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-yellow-200 focus:bg-yellow-200 focus:outline-0"
>
<span class="font-semibold">How do I get started?</span>
<svg
aria-hidden="true"
class="size-5 shrink-0 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>
<div class="border-t-2 border-black p-4">
<p class="text-black">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
<details
class="group border-2 border-black shadow-[4px_4px_0_0] shadow-black [&_summary::-webkit-details-marker]:hidden"
>
<summary
class="flex cursor-pointer items-center justify-between gap-4 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-yellow-200 focus:bg-yellow-200 focus:outline-0"
>
<span class="font-semibold">What support options are available?</span>
<svg
aria-hidden="true"
class="size-5 shrink-0 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>
<div class="border-t-2 border-black p-4">
<p class="text-black">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
</div><div class="space-y-3">
<details
class="group border-2 border-black shadow-[4px_4px_0_0] shadow-black dark:border-white dark:shadow-white [&_summary::-webkit-details-marker]:hidden"
>
<summary
class="flex cursor-pointer items-center justify-between gap-4 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-yellow-200 focus:bg-yellow-200 focus:outline-0 dark:bg-gray-900 dark:text-white dark:hover:bg-yellow-700 dark:focus:bg-yellow-700"
>
<span class="font-semibold">What are the basic features?</span>
<svg
aria-hidden="true"
class="size-5 shrink-0 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>
<div class="border-t-2 border-black p-4 dark:border-white">
<p class="text-black dark:text-white">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
<details
class="group border-2 border-black shadow-[4px_4px_0_0] shadow-black dark:border-white dark:shadow-white [&_summary::-webkit-details-marker]:hidden"
>
<summary
class="flex cursor-pointer items-center justify-between gap-4 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-yellow-200 focus:bg-yellow-200 focus:outline-0 dark:bg-gray-900 dark:text-white dark:hover:bg-yellow-700 dark:focus:bg-yellow-700"
>
<span class="font-semibold">How do I get started?</span>
<svg
aria-hidden="true"
class="size-5 shrink-0 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>
<div class="border-t-2 border-black p-4 dark:border-white">
<p class="text-black dark:text-white">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
<details
class="group border-2 border-black shadow-[4px_4px_0_0] shadow-black dark:border-white dark:shadow-white [&_summary::-webkit-details-marker]:hidden"
>
<summary
class="flex cursor-pointer items-center justify-between gap-4 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-yellow-200 focus:bg-yellow-200 focus:outline-0 dark:bg-gray-900 dark:text-white dark:hover:bg-yellow-700 dark:focus:bg-yellow-700"
>
<span class="font-semibold">What support options are available?</span>
<svg
aria-hidden="true"
class="size-5 shrink-0 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>
<div class="border-t-2 border-black p-4 dark:border-white">
<p class="text-black dark:text-white">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
</div><div class="divide-y-2 divide-black border-2 border-black shadow-[4px_4px_0_0] shadow-black">
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-yellow-200 focus:bg-yellow-200 focus:outline-0"
>
<span class="font-semibold">What are the basic features?</span>
<svg
aria-hidden="true"
class="size-5 shrink-0 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>
<div class="border-t-2 border-black p-4">
<p class="text-black">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-yellow-200 focus:bg-yellow-200 focus:outline-0"
>
<span class="font-semibold">How do I get started?</span>
<svg
aria-hidden="true"
class="size-5 shrink-0 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>
<div class="border-t-2 border-black p-4">
<p class="text-black">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-yellow-200 focus:bg-yellow-200 focus:outline-0"
>
<span class="font-semibold">What support options are available?</span>
<svg
aria-hidden="true"
class="size-5 shrink-0 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>
<div class="border-t-2 border-black p-4">
<p class="text-black">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
</div><div
class="divide-y-2 divide-black border-2 border-black shadow-[4px_4px_0_0] shadow-black dark:divide-white dark:border-white dark:shadow-white"
>
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-yellow-200 focus:bg-yellow-200 focus:outline-0 dark:bg-gray-900 dark:text-white dark:hover:bg-yellow-700 dark:focus:bg-yellow-700"
>
<span class="font-semibold">What are the basic features?</span>
<svg
aria-hidden="true"
class="size-5 shrink-0 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>
<div class="border-t-2 border-black p-4 dark:border-white">
<p class="text-black dark:text-white">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-yellow-200 focus:bg-yellow-200 focus:outline-0 dark:bg-gray-900 dark:text-white dark:hover:bg-yellow-700 dark:focus:bg-yellow-700"
>
<span class="font-semibold">How do I get started?</span>
<svg
aria-hidden="true"
class="size-5 shrink-0 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>
<div class="border-t-2 border-black p-4 dark:border-white">
<p class="text-black dark:text-white">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-yellow-200 focus:bg-yellow-200 focus:outline-0 dark:bg-gray-900 dark:text-white dark:hover:bg-yellow-700 dark:focus:bg-yellow-700"
>
<span class="font-semibold">What support options are available?</span>
<svg
aria-hidden="true"
class="size-5 shrink-0 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>
<div class="border-t-2 border-black p-4 dark:border-white">
<p class="text-black dark:text-white">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
</div>