<details
  class="bg-white text-zinc-950 rounded dark:bg-zinc-950 dark:text-zinc-50
  border-2 border-zinc-200 dark:border-white/10
  not-first:mt-2
  details-content:transition-opacity
  details-content:duration-500
  details-content:opacity-0
  open:details-content:opacity-100
  open:[&>summary]:after:translate-y-[20%] open:[&>summary]:after:rotate-225"
>
  <summary
    class="relative flex items-center justify-between py-2.5 px-4 cursor-pointer
    [&::-webkit-details-marker]:hidden
    after:w-[6px] after:h-[6px] after:content-['']
    after:border-r-2 after:border-b-2 after:border-zinc-500 dark:after:border-zinc-400
    after:transition-transform after:duration-300
    after:-translate-y-[20%] after:rotate-45"
  >
    Accordion Title
  </summary>
  <p class="text-sm px-4 pb-2.5 m-0">This is Accordion text.</p>
</details>
<style>
  .accordion {
    background-color: var(--background, #fff);
    border: 2px solid var(--border, #e4e4e7);
    border-radius: 5px;
    color: var(--foreground, #09090b);

    &:not(:first-child) {
      margin-top: 0.5rem;
    }

    .title {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.6rem 1rem;
      cursor: pointer;

      &::-webkit-details-marker {
        display: none;
      }

      &::after {
        width: 6px;
        height: 6px;
        content: "";
        border-right: 2px solid var(--muted-foreground, #71717b);
        border-bottom: 2px solid var(--muted-foreground, #71717b);
        transition: transform 0.3s;
        transform: translateY(-20%) rotate(45deg);
      }
    }

    &::details-content {
      transition: opacity 0.5s allow-discrete;
      opacity: 0;
    }

    &[open] .title::after {
      transform: translateY(20%) rotate(225deg);
    }

    &[open]::details-content {
      opacity: 1;
    }

    & .content {
      padding: 0 1rem 0.6rem 1rem;
      margin: 0;
      font-size: 0.85rem;
    }
  }
</style>
矢印アイコン + 枠線付きのアコーディオン

Other Tailwind CSS UI parts

アコーディオン
