Marketing FAQs Divided with chevrons

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

Related components

More items from the merged UI library.

View all