<div class="flex flex-col items-center">
  <button
    class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-primary-75 bg-primary-50 m-text font-medium relative after:h-8 after:w-px after:border-r after:border-primary-200 after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 mb-[30px]"
  >
    Tasha Mcneill
  </button>
  <div class="relative flex gap-2 md:gap-4 mt-8 after:w-[80%] after:h-8 after:absolute after:-top-8 after:left-1/2 after:-translate-x-1/2 after:border after:rounded-tl-xl after:rounded-tr-xl after:border-b-0 after:border-primary-200">
    <ul class="flex flex-col items-center">
      <li>
        <button
          class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-primary-75 bg-primary-50 m-text font-medium relative after:h-8 after:w-px after:border-r after:border-primary-200 after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 mb-[30px]"
        >
          John Stone
        </button>
      </li>
      <li><button class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-primary-75 bg-primary-50 m-text font-medium">Rimsha Wynn</button></li>
    </ul>
    <ul class="flex flex-col items-center">
      <li>
        <button
          class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-primary-75 bg-primary-50 m-text font-medium relative after:h-8 after:w-px after:border-r after:border-primary-200 after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 before:h-8 before:w-px before:border-r before:border-primary-200 before:absolute before:-top-8 before:left-1/2 before:-translate-x-1/2 mb-[30px]"
        >
          Ponnappa Priya
        </button>
      </li>
      <li class="flex flex-col items-center">
        <button
          class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-primary-75 bg-primary-50 m-text font-medium relative after:h-8 after:w-px after:border-r after:border-primary-200 after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 mb-[30px]"
        >
          Tyra Elliot
        </button>
        <div class="flex gap-1 sm:gap-2 md:gap-4 mt-8 after:w-[60%] relative after:h-8 after:absolute after:-top-8 after:left-1/2 after:-translate-x-1/2 after:border after:rounded-tl-xl after:rounded-tr-xl after:border-b-0 after:border-primary-200">
          <ul class="flex flex-col items-center">
            <li>
              <button
                class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-primary-75 bg-primary-50 m-text font-medium relative after:h-8 after:w-px after:border-r after:border-primary-200 after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 mb-[30px]"
              >
                John Stone
              </button>
            </li>
            <li><button class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-primary-75 bg-primary-50 m-text font-medium">Rimsha Wynn</button></li>
          </ul>
          <ul class="flex flex-col items-center">
            <li><button class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-primary-75 bg-primary-50 m-text font-medium">Rimsha Wynn</button></li>
          </ul>
        </div>
      </li>
    </ul>
    <ul class="flex flex-col items-center">
      <li class="flex flex-col items-center">
        <button
          class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-primary-75 bg-primary-50 m-text font-medium relative after:h-8 after:w-px after:border-r after:border-primary-200 after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 mb-[30px]"
        >
          Peter Stanbridge
        </button>
        <ul class="flex gap-1 sm:gap-2 md:gap-4 items-center mt-8 after:w-[60%] relative after:h-8 after:absolute after:-top-8 after:left-1/2 after:-translate-x-1/2 after:border after:rounded-tl-xl after:rounded-tr-xl after:border-b-0 after:border-primary-200">
          <li><button class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-primary-75 bg-primary-50 m-text font-medium">Harding</button></li>
          <li><button class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-primary-75 bg-primary-50 m-text font-medium">Medrano</button></li>
        </ul>
      </li>
    </ul>
  </div>
</div>
                  

<div class="flex flex-col items-center">
  <div
    class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-neutral-30 dark:border-neutral-300 bg-neutral-20 dark:bg-neutral-903 m-text font-medium relative after:h-8 after:w-px after:border-r after:border-neutral-40 after:dark:border-neutral-200 after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 mb-[30px] w-48"
  >
    <div class="flex justify-between items-start mb-3">
      <img src="./assets/images/avatar/avatar-1.png" class="size-10 rounded-full" alt="" />
      <div x-data="dropdown" class="relative">
        <button @click="toggle"><i class="las la-ellipsis-h text-xl"></i></button>
        <div x-show="isOpen" @click.away="close" class="absolute top-full left-0 w-40 z-10 p-3 rounded-xl border border-neutral-30 bg-neutral-0 dark:bg-neutral-904 dark:border-neutral-500 shadow-xl flex flex-col">
          <button class="w-full flex items-center rounded-lg gap-2 py-1.5 px-2 hover:bg-neutral-20 duration-300 hover:dark:bg-neutral-903">
            <i class="las la-edit text-xl"></i>
            Edit
          </button>
          <button class="w-full flex items-center rounded-lg gap-2 py-1.5 px-2 hover:bg-neutral-20 duration-300 hover:dark:bg-neutral-903">
            <i class="las la-trash text-xl"></i>
            Delete
          </button>
        </div>
      </div>
    </div>
    <p class="l-text mb-1 font-medium">Elenor Pena</p>
    <p class="s-text">Ceo, Co-Founder</p>
  </div>
  <div class="relative flex flex-wrap gap-2 md:gap-4 mt-8 after:w-[75%] after:h-8 after:absolute after:-top-8 after:left-1/2 after:-translate-x-1/2 after:border after:rounded-tl-xl after:rounded-tr-xl after:border-b-0 after:border-neutral-40 after:dark:border-neutral-200">
    <ul class="flex flex-col items-center">
      <li>
        <div
          class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-neutral-30 dark:border-neutral-300 bg-neutral-20 dark:bg-neutral-903 m-text font-medium relative after:h-8 after:w-px after:border-r after:border-neutral-40 after:dark:border-neutral-200 after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 mb-[30px] w-48"
        >
          <div class="flex justify-between items-start mb-3">
            <img src="./assets/images/avatar/avatar-2.png" class="size-10 rounded-full" alt="" />
            <div x-data="dropdown" class="relative">
              <button @click="toggle"><i class="las la-ellipsis-h text-xl"></i></button>
              <div x-show="isOpen" @click.away="close" class="absolute top-full left-0 w-40 z-10 p-3 rounded-xl border border-neutral-30 bg-neutral-0 dark:bg-neutral-904 dark:border-neutral-500 shadow-xl flex flex-col">
                <button class="w-full flex items-center rounded-lg gap-2 py-1.5 px-2 hover:bg-neutral-20 duration-300 hover:dark:bg-neutral-903">
                  <i class="las la-edit text-xl"></i>
                  Edit
                </button>
                <button class="w-full flex items-center rounded-lg gap-2 py-1.5 px-2 hover:bg-neutral-20 duration-300 hover:dark:bg-neutral-903">
                  <i class="las la-trash text-xl"></i>
                  Delete
                </button>
              </div>
            </div>
          </div>
          <p class="l-text mb-1 font-medium">Ralfh Edwards</p>
          <p class="s-text">Lead</p>
        </div>
      </li>
      <li>
        <div class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-neutral-30 dark:border-neutral-300 bg-neutral-20 dark:bg-neutral-903 m-text font-medium w-48">
          <div class="flex justify-between items-start mb-3">
            <img src="./assets/images/avatar/avatar-3.png" class="size-10 rounded-full" alt="" />
            <div x-data="dropdown" class="relative">
              <button @click="toggle"><i class="las la-ellipsis-h text-xl"></i></button>
              <div x-show="isOpen" @click.away="close" class="absolute top-full left-0 w-40 z-10 p-3 rounded-xl border border-neutral-30 bg-neutral-0 dark:bg-neutral-904 dark:border-neutral-500 shadow-xl flex flex-col">
                <button class="w-full flex items-center rounded-lg gap-2 py-1.5 px-2 hover:bg-neutral-20 duration-300 hover:dark:bg-neutral-903">
                  <i class="las la-edit text-xl"></i>
                  Edit
                </button>
                <button class="w-full flex items-center rounded-lg gap-2 py-1.5 px-2 hover:bg-neutral-20 duration-300 hover:dark:bg-neutral-903">
                  <i class="las la-trash text-xl"></i>
                  Delete
                </button>
              </div>
            </div>
          </div>
          <p class="l-text mb-1 font-medium">Esther Howard</p>
          <p class="s-text">Manager</p>
        </div>
      </li>
    </ul>
    <ul class="flex flex-col items-center">
      <li>
        <div
          class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-neutral-30 dark:border-neutral-300 bg-neutral-20 dark:bg-neutral-903 m-text font-medium relative after:h-8 after:w-px after:border-r after:border-neutral-40 after:dark:border-neutral-200 after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 before:h-8 before:w-px before:border-r before:border-neutral-40 before:dark:border-neutral-200 before:absolute before:-top-8 before:left-1/2 before:-translate-x-1/2 mb-[30px] w-48"
        >
          <div class="flex justify-between items-start mb-3">
            <img src="./assets/images/avatar/avatar-4.png" class="size-10 rounded-full" alt="" />
            <div x-data="dropdown" class="relative">
              <button @click="toggle"><i class="las la-ellipsis-h text-xl"></i></button>
              <div x-show="isOpen" @click.away="close" class="absolute top-full left-0 w-40 z-10 p-3 rounded-xl border border-neutral-30 bg-neutral-0 dark:bg-neutral-904 dark:border-neutral-500 shadow-xl flex flex-col">
                <button class="w-full flex items-center rounded-lg gap-2 py-1.5 px-2 hover:bg-neutral-20 duration-300 hover:dark:bg-neutral-903">
                  <i class="las la-edit text-xl"></i>
                  Edit
                </button>
                <button class="w-full flex items-center rounded-lg gap-2 py-1.5 px-2 hover:bg-neutral-20 duration-300 hover:dark:bg-neutral-903">
                  <i class="las la-trash text-xl"></i>
                  Delete
                </button>
              </div>
            </div>
          </div>
          <p class="l-text mb-1 font-medium">Dianne Russel</p>
          <p class="s-text">Lead</p>
        </div>
      </li>
      <li class="flex flex-col items-center">
        <div
          class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-neutral-30 dark:border-neutral-300 bg-neutral-20 dark:bg-neutral-903 m-text font-medium relative after:h-8 after:w-px after:border-r after:border-neutral-40 after:dark:border-neutral-200 after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 mb-[30px] w-48"
        >
          <div class="flex justify-between items-start mb-3">
            <img src="./assets/images/avatar/avatar-2.png" class="size-10 rounded-full" alt="" />
            <div x-data="dropdown" class="relative">
              <button @click="toggle"><i class="las la-ellipsis-h text-xl"></i></button>
              <div x-show="isOpen" @click.away="close" class="absolute top-full left-0 w-40 z-10 p-3 rounded-xl border border-neutral-30 bg-neutral-0 dark:bg-neutral-904 dark:border-neutral-500 shadow-xl flex flex-col">
                <button class="w-full flex items-center rounded-lg gap-2 py-1.5 px-2 hover:bg-neutral-20 duration-300 hover:dark:bg-neutral-903">
                  <i class="las la-edit text-xl"></i>
                  Edit
                </button>
                <button class="w-full flex items-center rounded-lg gap-2 py-1.5 px-2 hover:bg-neutral-20 duration-300 hover:dark:bg-neutral-903">
                  <i class="las la-trash text-xl"></i>
                  Delete
                </button>
              </div>
            </div>
          </div>
          <p class="l-text mb-1 font-medium">Courtney Henry</p>
          <p class="s-text">Manager</p>
        </div>
        <div
          class="flex gap-1 flex-wrap sm:gap-2 md:gap-4 mt-8 after:w-[60%] relative after:h-8 after:absolute after:-top-8 after:left-1/2 after:-translate-x-1/2 after:border after:rounded-tl-xl after:rounded-tr-xl after:border-b-0 after:border-neutral-40 after:dark:border-neutral-500"
        >
          <ul class="flex flex-col items-center">
            <li>
              <div
                class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-neutral-30 dark:border-neutral-300 bg-neutral-20 dark:bg-neutral-903 m-text font-medium relative after:h-8 after:w-px after:border-r after:border-neutral-40 after:dark:border-neutral-200 after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 mb-[30px] w-48"
              >
                <div class="flex justify-between items-start mb-3">
                  <img src="./assets/images/avatar/avatar-6.png" class="size-10 rounded-full" alt="" />
                  <div x-data="dropdown" class="relative">
                    <button @click="toggle"><i class="las la-ellipsis-h text-xl"></i></button>
                    <div x-show="isOpen" @click.away="close" class="absolute top-full left-0 w-40 z-10 p-3 rounded-xl border border-neutral-30 bg-neutral-0 dark:bg-neutral-904 dark:border-neutral-500 shadow-xl flex flex-col">
                      <button class="w-full flex items-center rounded-lg gap-2 py-1.5 px-2 hover:bg-neutral-20 duration-300 hover:dark:bg-neutral-903">
                        <i class="las la-edit text-xl"></i>
                        Edit
                      </button>
                      <button class="w-full flex items-center rounded-lg gap-2 py-1.5 px-2 hover:bg-neutral-20 duration-300 hover:dark:bg-neutral-903">
                        <i class="las la-trash text-xl"></i>
                        Delete
                      </button>
                    </div>
                  </div>
                </div>
                <p class="l-text mb-1 font-medium">Annette Black</p>
                <p class="s-text">Back end Developer</p>
              </div>
            </li>
            <li>
              <div class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-neutral-30 dark:border-neutral-300 bg-neutral-20 dark:bg-neutral-903 m-text font-medium w-48">
                <div class="flex justify-between items-start mb-3">
                  <img src="./assets/images/avatar/avatar-2.png" class="size-10 rounded-full" alt="" />
                  <div x-data="dropdown" class="relative">
                    <button @click="toggle"><i class="las la-ellipsis-h text-xl"></i></button>
                    <div x-show="isOpen" @click.away="close" class="absolute top-full left-0 w-40 z-10 p-3 rounded-xl border border-neutral-30 bg-neutral-0 dark:bg-neutral-904 dark:border-neutral-500 shadow-xl flex flex-col">
                      <button class="w-full flex items-center rounded-lg gap-2 py-1.5 px-2 hover:bg-neutral-20 duration-300 hover:dark:bg-neutral-903">
                        <i class="las la-edit text-xl"></i>
                        Edit
                      </button>
                      <button class="w-full flex items-center rounded-lg gap-2 py-1.5 px-2 hover:bg-neutral-20 duration-300 hover:dark:bg-neutral-903">
                        <i class="las la-trash text-xl"></i>
                        Delete
                      </button>
                    </div>
                  </div>
                </div>
                <p class="l-text mb-1 font-medium">Albert Flores</p>
                <p class="s-text">Front end Develper</p>
              </div>
            </li>
          </ul>
          <ul class="flex flex-col items-center">
            <li>
              <div class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-neutral-30 dark:border-neutral-300 bg-neutral-20 dark:bg-neutral-903 m-text font-medium w-48">
                <div class="flex justify-between items-start mb-3">
                  <img src="./assets/images/avatar/avatar-2.png" class="size-10 rounded-full" alt="" />
                  <div x-data="dropdown" class="relative">
                    <button @click="toggle"><i class="las la-ellipsis-h text-xl"></i></button>
                    <div x-show="isOpen" @click.away="close" class="absolute top-full left-0 w-40 z-10 p-3 rounded-xl border border-neutral-30 bg-neutral-0 dark:bg-neutral-904 dark:border-neutral-500 shadow-xl flex flex-col">
                      <button class="w-full flex items-center rounded-lg gap-2 py-1.5 px-2 hover:bg-neutral-20 duration-300 hover:dark:bg-neutral-903">
                        <i class="las la-edit text-xl"></i>
                        Edit
                      </button>
                      <button class="w-full flex items-center rounded-lg gap-2 py-1.5 px-2 hover:bg-neutral-20 duration-300 hover:dark:bg-neutral-903">
                        <i class="las la-trash text-xl"></i>
                        Delete
                      </button>
                    </div>
                  </div>
                </div>
                <p class="l-text mb-1 font-medium">Floyed Miles</p>
                <p class="s-text">UI/UX Design</p>
              </div>
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <ul class="flex flex-col items-center">
      <li class="flex flex-col items-center">
        <div
          class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-neutral-30 dark:border-neutral-300 bg-neutral-20 dark:bg-neutral-903 m-text font-medium relative after:h-8 after:w-px after:border-r after:border-neutral-40 after:dark:border-neutral-200 after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 mb-[30px] w-48"
        >
          <div class="flex justify-between items-start mb-3">
            <img src="./assets/images/avatar/avatar-7.png" class="size-10 rounded-full" alt="" />
            <div x-data="dropdown" class="relative">
              <button @click="toggle"><i class="las la-ellipsis-h text-xl"></i></button>
              <div x-show="isOpen" @click.away="close" class="absolute top-full left-0 w-40 z-10 p-3 rounded-xl border border-neutral-30 bg-neutral-0 dark:bg-neutral-904 dark:border-neutral-500 shadow-xl flex flex-col">
                <button class="w-full flex items-center rounded-lg gap-2 py-1.5 px-2 hover:bg-neutral-20 duration-300 hover:dark:bg-neutral-903">
                  <i class="las la-edit text-xl"></i>
                  Edit
                </button>
                <button class="w-full flex items-center rounded-lg gap-2 py-1.5 px-2 hover:bg-neutral-20 duration-300 hover:dark:bg-neutral-903">
                  <i class="las la-trash text-xl"></i>
                  Delete
                </button>
              </div>
            </div>
          </div>
          <p class="l-text mb-1 font-medium">Robert Fox</p>
          <p class="s-text">Lead</p>
        </div>
        <ul
          class="flex flex-wrap gap-1 sm:gap-2 md:gap-4 items-center mt-8 after:w-[60%] relative after:h-8 after:absolute after:-top-8 after:left-1/2 after:-translate-x-1/2 after:border after:rounded-tl-xl after:rounded-tr-xl after:border-b-0 after:border-neutral-40 after:dark:border-neutral-200"
        >
          <li>
            <div class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-neutral-30 dark:border-neutral-300 bg-neutral-20 dark:bg-neutral-903 m-text font-medium w-48">
              <div class="flex justify-between items-start mb-3">
                <img src="./assets/images/avatar/avatar-2.png" class="size-10 rounded-full" alt="" />
                <div x-data="dropdown" class="relative">
                  <button @click="toggle"><i class="las la-ellipsis-h text-xl"></i></button>
                  <div x-show="isOpen" @click.away="close" class="absolute top-full left-0 w-40 z-10 p-3 rounded-xl border border-neutral-30 bg-neutral-0 dark:bg-neutral-904 dark:border-neutral-500 shadow-xl flex flex-col">
                    <button class="w-full flex items-center rounded-lg gap-2 py-1.5 px-2 hover:bg-neutral-20 duration-300 hover:dark:bg-neutral-903">
                      <i class="las la-edit text-xl"></i>
                      Edit
                    </button>
                    <button class="w-full flex items-center rounded-lg gap-2 py-1.5 px-2 hover:bg-neutral-20 duration-300 hover:dark:bg-neutral-903">
                      <i class="las la-trash text-xl"></i>
                      Delete
                    </button>
                  </div>
                </div>
              </div>
              <p class="l-text mb-1 font-medium">Jenny Wilson</p>
              <p class="s-text">Support</p>
            </div>
          </li>
          <li>
            <div class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-neutral-30 dark:border-neutral-300 bg-neutral-20 dark:bg-neutral-903 m-text font-medium w-48">
              <div class="flex justify-between items-start mb-3">
                <img src="./assets/images/avatar/avatar-9.png" class="size-10 rounded-full" alt="" />
                <div x-data="dropdown" class="relative">
                  <button @click="toggle"><i class="las la-ellipsis-h text-xl"></i></button>
                  <div x-show="isOpen" @click.away="close" class="absolute top-full left-0 w-40 z-10 p-3 rounded-xl border border-neutral-30 bg-neutral-0 dark:bg-neutral-904 dark:border-neutral-500 shadow-xl flex flex-col">
                    <button class="w-full flex items-center rounded-lg gap-2 py-1.5 px-2 hover:bg-neutral-20 duration-300 hover:dark:bg-neutral-903">
                      <i class="las la-edit text-xl"></i>
                      Edit
                    </button>
                    <button class="w-full flex items-center rounded-lg gap-2 py-1.5 px-2 hover:bg-neutral-20 duration-300 hover:dark:bg-neutral-903">
                      <i class="las la-trash text-xl"></i>
                      Delete
                    </button>
                  </div>
                </div>
              </div>
              <p class="l-text mb-1 font-medium">Jacob Jones</p>
              <p class="s-text">Content Writer</p>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>
                  

<div class="flex flex-col items-center">
  <div
    class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-neutral-30 dark:border-neutral-300 bg-neutral-20 dark:bg-neutral-903 m-text font-medium relative after:h-16 after:w-px after:border-r after:border-neutral-40 after:dark:border-neutral-200 after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 mb-16 w-48 text-center mt-8"
  >
    <img src="./assets/images/avatar/avatar-1.png" class="size-10 z-[3] rounded-full border border-neutral-40 dark:border-neutral-500 absolute left-1/2 -translate-x-1/2 -top-6" alt="" />
    <p class="l-text mb-1 font-medium mt-4">Wade Warren</p>
    <p class="s-text">Ceo, Co-Founder</p>
  </div>
  <div class="relative flex flex-wrap gap-2 md:gap-4 mt-20 after:w-[75%] after:h-20 after:absolute after:-top-20 after:left-1/2 after:-translate-x-[56%] after:border after:rounded-tl-xl after:rounded-tr-xl after:border-b-0 after:border-neutral-40 after:dark:border-neutral-200">
    <ul class="flex flex-col items-center">
      <li>
        <button
          class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-success-75 bg-success-50 dark:bg-neutral-904 m-text font-medium relative after:h-24 after:w-px after:border-r after:border-neutral-40 after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 mb-24 flex items-center gap-2"
        >
          <span>Product Design</span> <span class="w-6 h-[26px] bg-neutral-0 dark:bg-neutral-904 rounded-md f-center border border-success-100">2</span>
        </button>
      </li>
      <li>
        <div
          class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-neutral-30 dark:border-neutral-300 bg-neutral-20 dark:bg-neutral-903 m-text font-medium border-t-4 border-t-success-300 dark:border-t-success-300 relative after:h-24 after:w-px after:border-r after:border-neutral-40 text-center after:dark:border-neutral-200 after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 mb-24 w-48"
        >
          <img src="./assets/images/avatar/avatar-2.png" class="size-10 z-[3] rounded-full border border-neutral-40 dark:border-neutral-500 absolute left-1/2 -translate-x-1/2 -top-5" alt="" />
          <p class="l-text mb-1 font-medium pt-5">Ralfh Edwards</p>
          <p class="s-text">Lead</p>
        </div>
      </li>
      <li>
        <div
          class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-neutral-30 dark:border-neutral-300 bg-neutral-20 dark:bg-neutral-903 m-text font-medium border-t-4 border-t-success-300 dark:border-t-success-300 relative w-48 text-center"
        >
          <img src="./assets/images/avatar/avatar-3.png" class="size-10 z-[3] rounded-full border border-neutral-40 dark:border-neutral-500 absolute left-1/2 -translate-x-1/2 -top-5" alt="" />
          <p class="l-text mb-1 font-medium pt-5">Esther Howard</p>
          <p class="s-text">Lead</p>
        </div>
      </li>
    </ul>
    <ul class="flex flex-col items-center">
      <li>
        <button
          class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-secondary-75 bg-secondary-50 dark:bg-neutral-904 m-text font-medium relative after:h-24 after:w-px after:border-r after:border-neutral-40 after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 before:h-20 before:w-px before:border-r before:border-neutral-40 before:absolute before:bottom-full before:left-1/2 before:-translate-x-1/2 mb-24 flex items-center gap-2"
        >
          <span>Development</span> <span class="w-6 h-[26px] bg-neutral-0 dark:bg-neutral-904 rounded-md f-center border border-secondary-100">5</span>
        </button>
      </li>
      <li>
        <div
          class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-neutral-30 dark:border-neutral-300 bg-neutral-20 dark:bg-neutral-903 m-text font-medium border-t-4 border-t-secondary-300 dark:border-t-secondary-300 relative after:h-24 after:w-px after:border-r after:border-neutral-40 text-center after:dark:border-neutral-200 after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 mb-24 w-48"
        >
          <img src="./assets/images/avatar/avatar-2.png" class="size-10 z-[3] rounded-full border border-neutral-40 dark:border-neutral-500 absolute left-1/2 -translate-x-1/2 -top-5" alt="" />
          <p class="l-text mb-1 font-medium pt-5">Dianne Russel</p>
          <p class="s-text">Lead</p>
        </div>
      </li>
      <li class="flex flex-col items-center">
        <div
          class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-neutral-30 dark:border-neutral-300 bg-neutral-20 dark:bg-neutral-903 m-text font-medium border-t-4 border-t-secondary-300 dark:border-t-secondary-300 relative after:h-24 after:w-px after:border-r after:border-neutral-40 text-center after:dark:border-neutral-200 after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 mb-24 w-48"
        >
          <img src="./assets/images/avatar/avatar-2.png" class="size-10 z-[3] rounded-full border border-neutral-40 dark:border-neutral-500 absolute left-1/2 -translate-x-1/2 -top-5" alt="" />
          <p class="l-text mb-1 font-medium pt-5">Courtney Henry</p>
          <p class="s-text">Lead</p>
        </div>
        <div
          class="flex gap-1 flex-wrap sm:gap-2 md:gap-4 mt-20 after:w-[55%] relative after:h-20 after:absolute after:-top-20 after:left-1/2 after:-translate-x-1/2 after:border after:rounded-tl-xl after:rounded-tr-xl after:border-b-0 after:border-neutral-40 after:dark:border-neutral-500"
        >
          <ul class="flex flex-col items-center">
            <li>
              <div
                class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-neutral-30 dark:border-neutral-300 bg-neutral-20 dark:bg-neutral-903 m-text font-medium border-t-4 border-t-secondary-300 dark:border-t-secondary-300 relative after:h-24 after:w-px after:border-r after:border-neutral-40 text-center after:dark:border-neutral-200 after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 mb-24 w-48"
              >
                <img src="./assets/images/avatar/avatar-2.png" class="size-10 z-[3] rounded-full border border-neutral-40 dark:border-neutral-500 absolute left-1/2 -translate-x-1/2 -top-5" alt="" />
                <p class="l-text mb-1 font-medium pt-5">Bessie Cooper</p>
                <p class="s-text">Back end Deve</p>
              </div>
            </li>
            <li>
              <div
                class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-neutral-30 dark:border-neutral-300 bg-neutral-20 dark:bg-neutral-903 m-text font-medium border-t-4 border-t-secondary-300 dark:border-t-secondary-300 relative w-48 text-center"
              >
                <img src="./assets/images/avatar/avatar-2.png" class="size-10 z-[3] rounded-full border border-neutral-40 dark:border-neutral-500 absolute left-1/2 -translate-x-1/2 -top-5" alt="" />
                <p class="l-text mb-1 font-medium pt-5">Robert Fox</p>
                <p class="s-text">Back end Deve</p>
              </div>
            </li>
          </ul>
          <ul class="flex flex-col items-center">
            <li>
              <div
                class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-neutral-30 dark:border-neutral-300 bg-neutral-20 dark:bg-neutral-903 m-text font-medium border-t-4 border-t-secondary-300 dark:border-t-secondary-300 relative w-48 text-center"
              >
                <img src="./assets/images/avatar/avatar-2.png" class="size-10 z-[3] rounded-full border border-neutral-40 dark:border-neutral-500 absolute left-1/2 -translate-x-1/2 -top-5" alt="" />
                <p class="l-text mb-1 font-medium pt-5">Albert Flores</p>
                <p class="s-text">Back end Deve</p>
              </div>
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <ul class="flex flex-col items-center">
      <li>
        <button
          class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-warning-75 bg-warning-50 dark:bg-neutral-904 m-text font-medium relative after:h-24 after:w-px after:border-r after:border-neutral-40 after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 mb-24 flex items-center gap-2"
        >
          <span>Marketing</span> <span class="w-6 h-[26px] bg-neutral-0 dark:bg-neutral-904 rounded-md f-center border border-warning-100">5</span>
        </button>
      </li>
      <li class="flex flex-col items-center">
        <div
          class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-neutral-30 dark:border-neutral-300 bg-neutral-20 dark:bg-neutral-903 m-text font-medium border-t-4 border-t-warning-300 dark:border-t-warning-300 relative after:h-24 after:w-px after:border-r after:border-neutral-40 text-center after:dark:border-neutral-200 after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 mb-24 w-48"
        >
          <img src="./assets/images/avatar/avatar-2.png" class="size-10 z-[3] rounded-full border border-neutral-40 dark:border-neutral-500 absolute left-1/2 -translate-x-1/2 -top-5" alt="" />
          <p class="l-text mb-1 font-medium pt-5">Ralfh Edwards</p>
          <p class="s-text">Lead</p>
        </div>
        <ul
          class="flex flex-wrap gap-1 sm:gap-2 md:gap-4 items-center mt-20 after:w-[60%] relative after:h-20 after:absolute after:-top-20 after:left-1/2 after:-translate-x-1/2 after:border after:rounded-tl-xl after:rounded-tr-xl after:border-b-0 after:border-neutral-40 after:dark:border-neutral-200"
        >
          <li>
            <div
              class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-neutral-30 dark:border-neutral-300 bg-neutral-20 dark:bg-neutral-903 m-text font-medium border-t-4 border-t-warning-300 dark:border-t-warning-300 relative w-48 text-center"
            >
              <img src="./assets/images/avatar/avatar-2.png" class="size-10 z-[3] rounded-full border border-neutral-40 dark:border-neutral-500 absolute left-1/2 -translate-x-1/2 -top-5" alt="" />
              <p class="l-text mb-1 font-medium pt-5">Esther Howard</p>
              <p class="s-text">Support</p>
            </div>
          </li>
          <li>
            <div
              class="px-1 sm:px-3 lg:px-6 py-1 sm:py-2 lg:py-3 !text-xs md:text-sm lg:text-base rounded-xl border border-neutral-30 dark:border-neutral-300 bg-neutral-20 dark:bg-neutral-903 m-text font-medium border-t-4 border-t-warning-300 dark:border-t-warning-300 relative w-48 text-center"
            >
              <img src="./assets/images/avatar/avatar-2.png" class="size-10 z-[3] rounded-full border border-neutral-40 dark:border-neutral-500 absolute left-1/2 -translate-x-1/2 -top-5" alt="" />
              <p class="l-text mb-1 font-medium pt-5">Ronald Rechards</p>
              <p class="s-text">Content Writer</p>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>