Accordion component

Components > Accordion Component

Accordion

Accordion 1

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque mollitia cumque tempore nobis voluptatibus ab, pariatur qui voluptas soluta veritatis nisi neque magni culpa eum saepe. Illum ratione accusamus quibusdam?

Accordion 2

Accordion 3

Copy to clipboard

  <details>
  <summary class="translate duration-300 bg-gray-50 dark:bg-gray-900 hover:bg-gray-100 focus:bg-gray-200 dark:hover:bg-gray-950 dark:focus:bg-black text-base font-semibold cursor-pointer border dark:border-gray-700 p-4">
    Accordion 1
  </summary>
  <div class="translate duration-300 text-base border dark:border-gray-700 p-6">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque mollitia cumque tempore nobis voluptatibus ab, pariatur qui voluptas soluta veritatis nisi neque magni culpa eum saepe. Illum ratione accusamus quibusdam?
  </div>
</details>
<details>
  <summary class="translate duration-300 bg-gray-50 dark:bg-gray-900 hover:bg-gray-100 focus:bg-gray-200 dark:hover:bg-gray-950 dark:focus:bg-black text-base font-semibold cursor-pointer border dark:border-gray-700 p-4">
    Accordion 2
  </summary>
  <div class="translate duration-300 text-base border dark:border-gray-700 p-6">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque mollitia cumque tempore nobis voluptatibus ab, pariatur qui voluptas soluta veritatis nisi neque magni culpa eum saepe. Illum ratione accusamus quibusdam?
  </div>
</details>
<details>
  <summary class="translate duration-300 bg-gray-50 dark:bg-gray-900 hover:bg-gray-100 focus:bg-gray-200 dark:hover:bg-gray-950 dark:focus:bg-black text-base font-semibold cursor-pointer border dark:border-gray-700 p-4">
    Accordion 3
  </summary>
  <div class="translate duration-300 text-base border dark:border-gray-700 p-6">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque mollitia cumque tempore nobis voluptatibus ab, pariatur qui voluptas soluta veritatis nisi neque magni culpa eum saepe. Illum ratione accusamus quibusdam?
  </div>
</details>