Accordion

<div class="w-full max-w-80">
  <div class="w-full border-b">
    <h3 class="flex">
      <button
        type="button"
        class="group flex w-full items-center justify-between py-3"
      >
        Is it accessible
        <svg
          stroke="currentColor"
          fill="none"
          stroke-width="2"
          viewBox="0 0 24 24"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="h-4 w-4 shrink-0 text-muted-text"
          height="1em"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="m6 9 6 6 6-6"></path>
        </svg>
      </button>
    </h3>
  </div>
</div>

<div class="w-full max-w-80">
  <div class="w-full border-b">
    <h3 class="flex">
      <button
        type="button"
        class="group flex w-full items-center justify-between py-3"
      >
        Is it accessible
        <svg
          stroke="currentColor"
          fill="none"
          stroke-width="2"
          viewBox="0 0 24 24"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="h-4 w-4 shrink-0 rotate-180 text-muted-text"
          height="1em"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="m6 9 6 6 6-6"></path>
        </svg>
      </button>
    </h3>
    <div class="text-sm">
      <div class="pb-3 pt-0 text-muted-text">
        Yes. It adheres to the WAI-ARIA design pattern.
      </div>
    </div>
  </div>
</div>