Marketing FAQs Base with chevrons Dark

Live Preview
<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
            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
            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
            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>

Related components

More items from the merged UI library.

View all