<div class="mt-5 flex flex-col">
    <div x-data="{expanded:false}">
      <div
        @click="expanded = !expanded"
        class="flex cursor-pointer justify-between items-center py-4 text-base font-medium text-slate-700 dark:text-navy-100"
      >
        <p>Collapse Item 1</p>
        <div
          :class="expanded && '-rotate-180'"
          class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
        >
          <i class="fas fa-chevron-down"></i>
        </div>
      </div>
      <div x-collapse x-show="expanded">
        <div>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-2 flex  space-x-2">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>
        </div>
      </div>
    </div>
    <div x-data="{expanded:false}">
      <div
        @click="expanded = !expanded"
        class="flex cursor-pointer justify-between items-center py-4 text-base font-medium text-slate-700 dark:text-navy-100"
      >
        <p>Collapse Item 2</p>
        <div
          :class="expanded && '-rotate-180'"
          class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
        >
          <i class="fas fa-chevron-down"></i>
        </div>
      </div>
      <div x-collapse x-show="expanded">
        <div>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-2 flex  space-x-2">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>
        </div>
      </div>
    </div>
    <div x-data="{expanded:false}">
      <div
        @click="expanded = !expanded"
        class="flex cursor-pointer justify-between items-center py-4 text-base font-medium text-slate-700 dark:text-navy-100"
      >
        <p>Collapse Item 3</p>
        <div
          :class="expanded && '-rotate-180'"
          class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
        >
          <i class="fas fa-chevron-down"></i>
        </div>
      </div>
      <div x-collapse x-show="expanded">
        <div>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-2 flex  space-x-2">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
              

                
  <div
    class="mt-5 flex flex-col divide-y divide-slate-150 dark:divide-navy-500"
  >
    <div x-data="{expanded:false}">
      <div
        @click="expanded = !expanded"
        class="flex cursor-pointer justify-between items-center py-4 text-base font-medium text-slate-700 dark:text-navy-100"
      >
        <p>Collapse Item 1</p>
        <div
          :class="expanded && '-rotate-180'"
          class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
        >
          <i class="fas fa-chevron-down"></i>
        </div>
      </div>
      <div x-collapse x-show="expanded">
        <div class="pb-4">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-2 flex  space-x-2">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>
        </div>
      </div>
    </div>
    <div x-data="{expanded:false}">
      <div
        @click="expanded = !expanded"
        class="flex cursor-pointer justify-between items-center py-4 text-base font-medium text-slate-700 dark:text-navy-100"
      >
        <p>Collapse Item 2</p>
        <div
          :class="expanded && '-rotate-180'"
          class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
        >
          <i class="fas fa-chevron-down"></i>
        </div>
      </div>
      <div x-collapse x-show="expanded">
        <div class="pb-4">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-2 flex  space-x-2">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>
        </div>
      </div>
    </div>
    <div x-data="{expanded:false}">
      <div
        @click="expanded = !expanded"
        class="flex cursor-pointer justify-between items-center py-4 text-base font-medium text-slate-700 dark:text-navy-100"
      >
        <p>Collapse Item 3</p>
        <div
          :class="expanded && '-rotate-180'"
          class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
        >
          <i class="fas fa-chevron-down"></i>
        </div>
      </div>
      <div x-collapse x-show="expanded">
        <div class="pb-4">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-2 flex  space-x-2">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
              

                
  <div
    class="mt-5 flex flex-col divide-y divide-slate-150 rounded-lg border border-slate-150 dark:divide-navy-500 dark:border-navy-500"
  >
    <div x-data="{expanded:false}">
      <div
        @click="expanded = !expanded"
        class="flex cursor-pointer justify-between items-center px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5"
      >
        <p>Collapse Item 1</p>
        <div
          :class="expanded && '-rotate-180'"
          class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
        >
          <i class="fas fa-chevron-down"></i>
        </div>
      </div>
      <div x-collapse x-show="expanded">
        <div class="px-4 pb-4 sm:px-5">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-2 flex  space-x-2">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>
        </div>
      </div>
    </div>
    <div x-data="{expanded:false}">
      <div
        @click="expanded = !expanded"
        class="flex cursor-pointer justify-between items-center px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5"
      >
        <p>Collapse Item 2</p>
        <div
          :class="expanded && '-rotate-180'"
          class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
        >
          <i class="fas fa-chevron-down"></i>
        </div>
      </div>
      <div x-collapse x-show="expanded">
        <div class="px-4 pb-4 sm:px-5">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-2 flex  space-x-2">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>
        </div>
      </div>
    </div>
    <div x-data="{expanded:false}">
      <div
        @click="expanded = !expanded"
        class="flex cursor-pointer justify-between items-center px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5"
      >
        <p>Collapse Item 3</p>
        <div
          :class="expanded && '-rotate-180'"
          class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
        >
          <i class="fas fa-chevron-down"></i>
        </div>
      </div>
      <div x-collapse x-show="expanded">
        <div class="px-4 pb-4 sm:px-5">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-2 flex  space-x-2">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
              

                
  <div
    class="mt-5 flex flex-col space-y-4 rounded-lg sm:space-y-5 lg:space-y-6">
    <div
      x-data="{expanded:false}"
      class="rounded-lg border border-slate-150 dark:border-navy-500"
    >
      <div
        @click="expanded = !expanded"
        class="flex cursor-pointer justify-between items-center px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5"
      >
        <p>Collapse Item 1</p>
        <div
          :class="expanded && '-rotate-180'"
          class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
        >
          <i class="fas fa-chevron-down"></i>
        </div>
      </div>
      <div x-collapse x-show="expanded">
        <div class="px-4 pb-4 sm:px-5">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-4 flex justify-between">
            <div class="flex flex-wrap -space-x-2">
              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-16.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <div
                  class="is-initial rounded-full bg-info text-xs-plus uppercase text-white ring-2 ring-white dark:ring-navy-700"
                >
                  jd
                </div>
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-20.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-8.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-5.jpg"
                  alt="avatar"
                />
              </div>
            </div>
            <button
              class="btn size-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5 rotate-45"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M7 11l5-5m0 0l5 5m-5-5v12"
                ></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      x-data="{expanded:false}"
      class="rounded-lg border border-slate-150 dark:border-navy-500"
    >
      <div
        @click="expanded = !expanded"
        class="flex cursor-pointer justify-between items-center px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5"
      >
        <p>Collapse Item 2</p>
        <div
          :class="expanded && '-rotate-180'"
          class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
        >
          <i class="fas fa-chevron-down"></i>
        </div>
      </div>
      <div x-collapse x-show="expanded">
        <div class="px-4 pb-4 sm:px-5">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-4 flex justify-between">
            <div class="flex flex-wrap -space-x-2">
              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-16.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <div
                  class="is-initial rounded-full bg-info text-xs-plus uppercase text-white ring-2 ring-white dark:ring-navy-700"
                >
                  jd
                </div>
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-20.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-8.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-5.jpg"
                  alt="avatar"
                />
              </div>
            </div>
            <button
              class="btn size-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5 rotate-45"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M7 11l5-5m0 0l5 5m-5-5v12"
                ></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      x-data="{expanded:false}"
      class="rounded-lg border border-slate-150 dark:border-navy-500"
    >
      <div
        @click="expanded = !expanded"
        class="flex cursor-pointer justify-between items-center px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5"
      >
        <p>Collapse Item 3</p>
        <div
          :class="expanded && '-rotate-180'"
          class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
        >
          <i class="fas fa-chevron-down"></i>
        </div>
      </div>
      <div x-collapse x-show="expanded">
        <div class="px-4 pb-4 sm:px-5">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-4 flex justify-between">
            <div class="flex flex-wrap -space-x-2">
              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-16.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <div
                  class="is-initial rounded-full bg-info text-xs-plus uppercase text-white ring-2 ring-white dark:ring-navy-700"
                >
                  jd
                </div>
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-20.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-8.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-5.jpg"
                  alt="avatar"
                />
              </div>
            </div>
            <button
              class="btn size-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5 rotate-45"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M7 11l5-5m0 0l5 5m-5-5v12"
                ></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
              

                
  <div
    class="mt-5 flex flex-col divide-y divide-indigo-400 overflow-hidden rounded-lg border border-primary dark:border-accent"
  >
    <div x-data="{expanded:false}">
      <div
        @click="expanded = !expanded"
        class="flex cursor-pointer justify-between items-center bg-primary px-4 py-4 text-base font-medium text-white dark:bg-accent sm:px-5"
      >
        <p>Collapse Item 1</p>
        <div
          :class="expanded && '-rotate-180'"
          class="text-sm font-normal leading-none text-indigo-100 transition-transform duration-300"
        >
          <i class="fas fa-chevron-down"></i>
        </div>
      </div>
      <div x-collapse x-show="expanded">
        <div class="px-4 py-4 sm:px-5">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-2 flex  space-x-2">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>
        </div>
      </div>
    </div>
    <div x-data="{expanded:false}">
      <div
        @click="expanded = !expanded"
        class="flex cursor-pointer justify-between items-center bg-primary px-4 py-4 text-base font-medium text-white dark:bg-accent sm:px-5"
      >
        <p>Collapse Item 2</p>
        <div
          :class="expanded && '-rotate-180'"
          class="text-sm font-normal leading-none text-indigo-100 transition-transform duration-300"
        >
          <i class="fas fa-chevron-down"></i>
        </div>
      </div>
      <div x-collapse x-show="expanded">
        <div class="px-4 py-4 sm:px-5">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-2 flex  space-x-2">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>
        </div>
      </div>
    </div>
    <div x-data="{expanded:false}">
      <div
        @click="expanded = !expanded"
        class="flex cursor-pointer justify-between items-center bg-primary px-4 py-4 text-base font-medium text-white dark:bg-accent sm:px-5"
      >
        <p>Collapse Item 3</p>
        <div
          :class="expanded && '-rotate-180'"
          class="text-sm font-normal leading-none text-indigo-100 transition-transform duration-300"
        >
          <i class="fas fa-chevron-down"></i>
        </div>
      </div>
      <div x-collapse x-show="expanded">
        <div class="px-4 py-4 sm:px-5">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-2 flex  space-x-2">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
              

                
  <div class="mt-5 flex flex-col space-y-4 sm:space-y-5 lg:space-y-6">
    <div
      x-data="{expanded:false}"
      class="overflow-hidden rounded-lg border border-slate-150 dark:border-navy-500"
    >
      <div
        class="flex items-center justify-between bg-slate-150 px-4 py-4 dark:bg-navy-500 sm:px-5"
      >
        <div
          class="flex items-center  space-x-3.5 tracking-wide outline-hidden transition-all"
        >
          <div class="avatar size-10">
            <img
              class="rounded-full"
              src="images/avatar/avatar-10.jpg"
              alt="avatar"
            />
          </div>
          <div>
            <p class="text-slate-700 line-clamp-1 dark:text-navy-100">
              Simon Tods
            </p>
            <p class="text-xs text-slate-500 dark:text-navy-300">
              Web Developer
            </p>
          </div>
        </div>
        <button
          @click="expanded = !expanded"
          class="btn -mr-1.5 size-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
        >
          <i
            :class="expanded && '-rotate-180'"
            class="fas fa-chevron-down text-sm transition-transform"
          ></i>
        </button>
      </div>
      <div x-collapse x-show="expanded">
        <div class="px-4 py-4 sm:px-5">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-4 flex justify-between">
            <div class="flex flex-wrap -space-x-2">
              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-16.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <div
                  class="is-initial rounded-full bg-info text-xs-plus uppercase text-white ring-2 ring-white dark:ring-navy-700"
                >
                  jd
                </div>
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-20.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-8.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-5.jpg"
                  alt="avatar"
                />
              </div>
            </div>
            <button
              class="btn size-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5 rotate-45"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M7 11l5-5m0 0l5 5m-5-5v12"
                ></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      x-data="{expanded:false}"
      class="overflow-hidden rounded-lg border border-slate-150 dark:border-navy-500"
    >
      <div
        class="flex items-center justify-between bg-slate-150 px-4 py-4 dark:bg-navy-500 sm:px-5"
      >
        <div
          class="flex items-center  space-x-3.5 tracking-wide outline-hidden transition-all"
        >
          <div class="avatar size-10">
            <div
              class="is-initial rounded-full bg-warning uppercase text-white"
            >
              KG
            </div>
          </div>
          <div>
            <p class="text-slate-700 line-clamp-1 dark:text-navy-100">
              Konnor Guzman
            </p>
            <p class="text-xs text-slate-500 dark:text-navy-300">
              Frontend Developer
            </p>
          </div>
        </div>
        <button
          @click="expanded = !expanded"
          class="btn -mr-1.5 size-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
        >
          <i
            :class="expanded && '-rotate-180'"
            class="fas fa-chevron-down text-sm transition-transform"
          ></i>
        </button>
      </div>
      <div x-collapse x-show="expanded">
        <div class="px-4 py-4 sm:px-5">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-4 flex justify-between">
            <div class="flex flex-wrap -space-x-2">
              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-16.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <div
                  class="is-initial rounded-full bg-info text-xs-plus uppercase text-white ring-2 ring-white dark:ring-navy-700"
                >
                  jd
                </div>
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-20.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-8.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-5.jpg"
                  alt="avatar"
                />
              </div>
            </div>
            <button
              class="btn size-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5 rotate-45"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M7 11l5-5m0 0l5 5m-5-5v12"
                ></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      x-data="{expanded:false}"
      class="overflow-hidden rounded-lg border border-slate-150 dark:border-navy-500"
    >
      <div
        class="flex items-center justify-between bg-slate-150 px-4 py-4 dark:bg-navy-500 sm:px-5"
      >
        <div
          class="flex items-center  space-x-3.5 tracking-wide outline-hidden transition-all"
        >
          <div class="avatar size-10">
            <img
              class="rounded-full"
              src="images/avatar/avatar-19.jpg"
              alt="avatar"
            />
          </div>
          <div>
            <p class="text-slate-700 line-clamp-1 dark:text-navy-100">
              Derrick Simmons
            </p>
            <p class="text-xs text-slate-500 dark:text-navy-300">
              UI/UX Designer
            </p>
          </div>
        </div>
        <button
          @click="expanded = !expanded"
          class="btn -mr-1.5 size-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
        >
          <i
            :class="expanded && '-rotate-180'"
            class="fas fa-chevron-down text-sm transition-transform"
          ></i>
        </button>
      </div>
      <div x-collapse x-show="expanded">
        <div class="px-4 py-4 sm:px-5">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-4 flex justify-between">
            <div class="flex flex-wrap -space-x-2">
              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-16.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <div
                  class="is-initial rounded-full bg-info text-xs-plus uppercase text-white ring-2 ring-white dark:ring-navy-700"
                >
                  jd
                </div>
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-20.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-8.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-5.jpg"
                  alt="avatar"
                />
              </div>
            </div>
            <button
              class="btn size-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5 rotate-45"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M7 11l5-5m0 0l5 5m-5-5v12"
                ></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>