<div class="grid grid-row-2 sm:grid-row-1 sm:grid-cols-[180px_1fr] md:grid-cols-[250px_1fr] bg-black-50 dark:bg-black-800 grow-1">
  <div class="flex flex-col gap-24px py-32px px-12px sm:px-16px md:px-24px">
    <div class="flex items-baseline">
      <a
        href="/"
        class="flex text-u1 font-semibold gap-8px items-center py-4px sm:p-8px text-foreground! no-underline logo px-12px!">
        <svg
          width="24"
          height="24"
          viewbox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg">
          <rect
            width="24"
            height="24"
            rx="2"
            fill="black">
          </rect>
          <path
            d="M9.18014 20.625C7.94299 13.8881 7.93689 10.1401 9.18014 3.5"
            stroke="white"
            stroke-width="4">
          </path>
          <path
            d="M12.5 14.5L18.9952 18.25"
            stroke="white"
            stroke-width="4.5">
          </path>
          <circle
            cx="15.25"
            cy="8.25"
            r="3.25"
            fill="white">
          </circle>
        </svg>
        <span class="logo-text">
          Kaida
        </span>
      </a>
    </div>
    <div class="flex flex-col gap-4px">
      <div class="flex flex-col gap-4px group">
        <button
          name="button"
          type="button"
          class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-black-50 dark:aria-[expanded=true]:bg-black-700 group bg-transparent hover:bg-black-50 dark:hover:bg-black-800 hover:opacity-80 focus:opacity-80 data-[collapsed=true]:bg-white"
          aria-expanded="false"
          onclick="this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true')">
          <svg
            width="20"
            height="20"
            viewbox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path
              d="M10.0001 9.16667C11.841 9.16667 13.3334 7.67428 13.3334 5.83333C13.3334 3.99238 11.841 2.5 10.0001 2.5C8.15913 2.5 6.66675 3.99238 6.66675 5.83333C6.66675 7.67428 8.15913 9.16667 10.0001 9.16667Z"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round">
            </path>
            <path
              d="M5 17.5V15.8333C5 14.9493 5.35119 14.1014 5.97631 13.4763C6.60143 12.8512 7.44928 12.5 8.33333 12.5H11.6667C12.5507 12.5 13.3986 12.8512 14.0237 13.4763C14.6488 14.1014 15 14.9493 15 15.8333V17.5"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round">
            </path>
          </svg>
          <span class="menu-item-text">
            Users
          </span>
          <div class="text-black-600 ml-auto transition-all duration-500 will-change-[rotate] will-change-[color] group-aria-[expanded=true]:rotate-180 group-hover:text-black dark:text-black-200 dark:group-hover:text-white">
            <svg
              width="24"
              height="24"
              viewbox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <path
                d="M6 9L12 15L18 9"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round">
              </path>
            </svg>
          </div>
        </button>
        <div class="overflow-auto transition-all duration-300 ease-in-out max-h-0 opacity-0 group-has-[button[data-collapsed=true]]:max-h-[200px] group-has-[button[data-collapsed=true]]:opacity-100">
          <div class="flex sm:ps-12px">
            <div class="flex py-4px ps-12px pe-0 sm:pe-12px">
              <div class="w-[1px] bg-black-200">
              </div>
            </div>
            <div class="flex flex-col gap-4px grow-1">
              <a
                class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-black-50 dark:aria-[expanded=true]:bg-black-700 group bg-transparent hover:bg-black-50 dark:hover:bg-black-800 hover:opacity-80 focus:opacity-80 whitespace-break-spaces!"
                href="#">
                <span class="menu-item-text">
                  Active users
                </span>
              </a>
              <a
                class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-black-50 dark:aria-[expanded=true]:bg-black-700 group bg-transparent hover:bg-black-50 dark:hover:bg-black-800 hover:opacity-80 focus:opacity-80 whitespace-break-spaces!"
                href="#">
                <span class="menu-item-text">
                  Invited users
                </span>
              </a>
              <a
                class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-black-50 dark:aria-[expanded=true]:bg-black-700 group bg-transparent hover:bg-black-50 dark:hover:bg-black-800 hover:opacity-80 focus:opacity-80 whitespace-break-spaces!"
                href="#">
                <span class="menu-item-text">
                  Roles & permissions
                </span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="flex flex-col group">
        <button
          name="button"
          type="button"
          class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-black-50 dark:aria-[expanded=true]:bg-black-700 group bg-transparent hover:bg-black-50 dark:hover:bg-black-800 hover:opacity-80 focus:opacity-80 data-[collapsed=true]:bg-white"
          aria-expanded="false"
          onclick="this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true')">
          <svg
            width="20"
            height="20"
            viewbox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path
              d="M9.99986 14.7915L4.85653 17.4957L5.83903 11.7682L1.67236 7.71238L7.42236 6.87905L9.99403 1.66821L12.5657 6.87905L18.3157 7.71238L14.149 11.7682L15.1315 17.4957L9.99986 14.7915Z"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round">
            </path>
          </svg>
          <span class="menu-item-text">
            Projects
          </span>
          <div class="text-black-600 ml-auto transition-all duration-500 will-change-[rotate] will-change-[color] group-aria-[expanded=true]:rotate-180 group-hover:text-black dark:text-black-200 dark:group-hover:text-white">
            <svg
              width="24"
              height="24"
              viewbox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <path
                d="M6 9L12 15L18 9"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round">
              </path>
            </svg>
          </div>
        </button>
        <div class="overflow-auto transition-all duration-300 ease-in-out max-h-0 opacity-0 group-has-[button[data-collapsed=true]]:max-h-[200px] group-has-[button[data-collapsed=true]]:opacity-100">
          <div class="flex sm:ps-12px">
            <div class="flex py-4px ps-12px pe-0 sm:pe-12px">
              <div class="w-[1px] bg-black-200">
              </div>
            </div>
            <div class="flex flex-col gap-4px grow-1">
              <a
                class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-black-50 dark:aria-[expanded=true]:bg-black-700 group bg-transparent hover:bg-black-50 dark:hover:bg-black-800 hover:opacity-80 focus:opacity-80 whitespace-break-spaces!"
                href="#">
                <span class="menu-item-text">
                  Active users
                </span>
              </a>
              <a
                class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-black-50 dark:aria-[expanded=true]:bg-black-700 group bg-transparent hover:bg-black-50 dark:hover:bg-black-800 hover:opacity-80 focus:opacity-80 whitespace-break-spaces!"
                href="#">
                <span class="menu-item-text">
                  Invited users
                </span>
              </a>
              <a
                class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-black-50 dark:aria-[expanded=true]:bg-black-700 group bg-transparent hover:bg-black-50 dark:hover:bg-black-800 hover:opacity-80 focus:opacity-80 whitespace-break-spaces!"
                href="#">
                <span class="menu-item-text">
                  Roles & permissions
                </span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="flex flex-col group">
        <button
          name="button"
          type="button"
          class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-black-50 dark:aria-[expanded=true]:bg-black-700 group bg-transparent hover:bg-black-50 dark:hover:bg-black-800 hover:opacity-80 focus:opacity-80 data-[collapsed=true]:bg-white"
          aria-expanded="false"
          onclick="this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true')">
          <svg
            width="20"
            height="20"
            viewbox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path
              d="M7.50008 4.16675H5.83341C5.39139 4.16675 4.96746 4.34234 4.6549 4.6549C4.34234 4.96746 4.16675 5.39139 4.16675 5.83341V15.8334C4.16675 16.2754 4.34234 16.6994 4.6549 17.0119C4.96746 17.3245 5.39139 17.5001 5.83341 17.5001H14.1667C14.6088 17.5001 15.0327 17.3245 15.3453 17.0119C15.6578 16.6994 15.8334 16.2754 15.8334 15.8334V5.83341C15.8334 5.39139 15.6578 4.96746 15.3453 4.6549C15.0327 4.34234 14.6088 4.16675 14.1667 4.16675H12.5001"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round">
            </path>
            <path
              d="M10.8333 2.5H9.16667C8.24619 2.5 7.5 3.24619 7.5 4.16667C7.5 5.08714 8.24619 5.83333 9.16667 5.83333H10.8333C11.7538 5.83333 12.5 5.08714 12.5 4.16667C12.5 3.24619 11.7538 2.5 10.8333 2.5Z"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round">
            </path>
            <path
              d="M7.5 14.1667V10"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round">
            </path>
            <path
              d="M10 14.1666V13.3333"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round">
            </path>
            <path
              d="M12.5 14.1667V11.6667"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round">
            </path>
          </svg>
          <span class="menu-item-text">
            Reports
          </span>
          <div class="text-black-600 ml-auto transition-all duration-500 will-change-[rotate] will-change-[color] group-aria-[expanded=true]:rotate-180 group-hover:text-black dark:text-black-200 dark:group-hover:text-white">
            <svg
              width="24"
              height="24"
              viewbox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <path
                d="M6 9L12 15L18 9"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round">
              </path>
            </svg>
          </div>
        </button>
        <div class="overflow-auto transition-all duration-300 ease-in-out max-h-0 opacity-0 group-has-[button[data-collapsed=true]]:max-h-[200px] group-has-[button[data-collapsed=true]]:opacity-100">
          <div class="flex sm:ps-12px">
            <div class="flex py-4px ps-12px pe-0 sm:pe-12px">
              <div class="w-[1px] bg-black-200">
              </div>
            </div>
            <div class="flex flex-col gap-4px grow-1">
              <a
                class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-black-50 dark:aria-[expanded=true]:bg-black-700 group bg-transparent hover:bg-black-50 dark:hover:bg-black-800 hover:opacity-80 focus:opacity-80 whitespace-break-spaces!"
                href="#">
                <span class="menu-item-text">
                  Active users
                </span>
              </a>
              <a
                class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-black-50 dark:aria-[expanded=true]:bg-black-700 group bg-transparent hover:bg-black-50 dark:hover:bg-black-800 hover:opacity-80 focus:opacity-80 whitespace-break-spaces!"
                href="#">
                <span class="menu-item-text">
                  Invited users
                </span>
              </a>
              <a
                class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-black-50 dark:aria-[expanded=true]:bg-black-700 group bg-transparent hover:bg-black-50 dark:hover:bg-black-800 hover:opacity-80 focus:opacity-80 whitespace-break-spaces!"
                href="#">
                <span class="menu-item-text">
                  Roles & permissions
                </span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="flex flex-col group">
        <button
          name="button"
          type="button"
          class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-black-50 dark:aria-[expanded=true]:bg-black-700 group bg-transparent hover:bg-black-50 dark:hover:bg-black-800 hover:opacity-80 focus:opacity-80 data-[collapsed=true]:bg-white"
          aria-expanded="false"
          onclick="this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true')">
          <svg
            width="20"
            height="20"
            viewbox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path
              d="M8.60417 3.5975C8.95917 2.13417 11.0408 2.13417 11.3958 3.5975C11.4491 3.81733 11.5535 4.02148 11.7006 4.19333C11.8477 4.36518 12.0332 4.49988 12.2422 4.58645C12.4512 4.67303 12.6776 4.70904 12.9032 4.69156C13.1287 4.67407 13.3469 4.60359 13.54 4.48583C14.8258 3.7025 16.2983 5.17417 15.515 6.46083C15.3974 6.65388 15.327 6.87195 15.3096 7.09731C15.2922 7.32267 15.3281 7.54897 15.4146 7.75782C15.5011 7.96666 15.6356 8.15215 15.8073 8.29921C15.9789 8.44627 16.1829 8.55075 16.4025 8.60417C17.8658 8.95917 17.8658 11.0408 16.4025 11.3958C16.1827 11.4491 15.9785 11.5535 15.8067 11.7006C15.6348 11.8477 15.5001 12.0332 15.4135 12.2422C15.327 12.4512 15.291 12.6776 15.3084 12.9032C15.3259 13.1287 15.3964 13.3469 15.5142 13.54C16.2975 14.8258 14.8258 16.2983 13.5392 15.515C13.3461 15.3974 13.1281 15.327 12.9027 15.3096C12.6773 15.2922 12.451 15.3281 12.2422 15.4146C12.0333 15.5011 11.8479 15.6356 11.7008 15.8073C11.5537 15.9789 11.4492 16.1829 11.3958 16.4025C11.0408 17.8658 8.95917 17.8658 8.60417 16.4025C8.5509 16.1827 8.44648 15.9785 8.29941 15.8067C8.15233 15.6348 7.96676 15.5001 7.75779 15.4135C7.54882 15.327 7.32236 15.291 7.09685 15.3084C6.87133 15.3259 6.65313 15.3964 6.46 15.5142C5.17417 16.2975 3.70167 14.8258 4.485 13.5392C4.60258 13.3461 4.67296 13.1281 4.6904 12.9027C4.70785 12.6773 4.67187 12.451 4.58539 12.2422C4.49892 12.0333 4.36438 11.8479 4.19273 11.7008C4.02107 11.5537 3.81714 11.4492 3.5975 11.3958C2.13417 11.0408 2.13417 8.95917 3.5975 8.60417C3.81733 8.5509 4.02148 8.44648 4.19333 8.29941C4.36518 8.15233 4.49988 7.96676 4.58645 7.75779C4.67303 7.54882 4.70904 7.32236 4.69156 7.09685C4.67407 6.87133 4.60359 6.65313 4.48583 6.46C3.7025 5.17417 5.17417 3.70167 6.46083 4.485C7.29417 4.99167 8.37417 4.54333 8.60417 3.5975Z"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round">
            </path>
            <path
              d="M10 12.5C11.3807 12.5 12.5 11.3807 12.5 10C12.5 8.61929 11.3807 7.5 10 7.5C8.61929 7.5 7.5 8.61929 7.5 10C7.5 11.3807 8.61929 12.5 10 12.5Z"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round">
            </path>
          </svg>
          <span class="menu-item-text">
            Settings
          </span>
          <div class="text-black-600 ml-auto transition-all duration-500 will-change-[rotate] will-change-[color] group-aria-[expanded=true]:rotate-180 group-hover:text-black dark:text-black-200 dark:group-hover:text-white">
            <svg
              width="24"
              height="24"
              viewbox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <path
                d="M6 9L12 15L18 9"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round">
              </path>
            </svg>
          </div>
        </button>
        <div class="overflow-auto transition-all duration-300 ease-in-out max-h-0 opacity-0 group-has-[button[data-collapsed=true]]:max-h-[200px] group-has-[button[data-collapsed=true]]:opacity-100">
          <div class="flex sm:ps-12px">
            <div class="flex py-4px ps-12px pe-0 sm:pe-12px">
              <div class="w-[1px] bg-black-200">
              </div>
            </div>
            <div class="flex flex-col gap-4px grow-1">
              <a
                class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-black-50 dark:aria-[expanded=true]:bg-black-700 group bg-transparent hover:bg-black-50 dark:hover:bg-black-800 hover:opacity-80 focus:opacity-80 whitespace-break-spaces!"
                href="#">
                <span class="menu-item-text">
                  Active users
                </span>
              </a>
              <a
                class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-black-50 dark:aria-[expanded=true]:bg-black-700 group bg-transparent hover:bg-black-50 dark:hover:bg-black-800 hover:opacity-80 focus:opacity-80 whitespace-break-spaces!"
                href="#">
                <span class="menu-item-text">
                  Invited users
                </span>
              </a>
              <a
                class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-black-50 dark:aria-[expanded=true]:bg-black-700 group bg-transparent hover:bg-black-50 dark:hover:bg-black-800 hover:opacity-80 focus:opacity-80 whitespace-break-spaces!"
                href="#">
                <span class="menu-item-text">
                  Roles & permissions
                </span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="grid py-20px px-12px sm:px-16px md:px-20px">
    <div class="flex flex-col bg-background rounded-20px border border-black-100 dark:border-black-700 p-16px sm:p-24px md:p-32px gap-12px sm:gap-16px md:gap-24px">
      <nav class="flex flex-col">
        <ul class="flex items-center text-p2 gap-8px">
          <li class="flex items-center gap-8px whitespace-nowrap text-p2">
            <a
              class="text-black-500 hover:text-black dark:hover:text-white dark:text-black-400 no-underline"
              href="#">
              Home
            </a>
          </li>
          <li class="flex items-center gap-8px whitespace-nowrap text-p2">
            <svg
              width="20"
              height="20"
              viewbox="0 0 20 20"
              fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <g>
                <path
                  d="M7.5 15L12.5 10L7.5 5"
                  stroke="#989AA3"
                  stroke-linecap="round"
                  stroke-linejoin="round">
                </path>
              </g>
            </svg>
            <a
              class="text-black-500 hover:text-black dark:hover:text-white dark:text-black-400 no-underline"
              href="#">
              Users
            </a>
          </li>
          <li class="flex items-center gap-8px whitespace-nowrap text-p2">
            <svg
              width="20"
              height="20"
              viewbox="0 0 20 20"
              fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <g>
                <path
                  d="M7.5 15L12.5 10L7.5 5"
                  stroke="#989AA3"
                  stroke-linecap="round"
                  stroke-linejoin="round">
                </path>
              </g>
            </svg>
            <p class="font-bold cursor-default text-black dark:text-white hover:text-black-700 dark:hover:text-black-200">
              Overview
            </p>
          </li>
        </ul>
      </nav>
      <div class="flex flex-col gap-16px">
        <div class="flex flex-col gap-8px">
          <h1 class="text-h5">
            Users
          </h1>
          <p class="text-p3 text-black-600">
            Get insights into your users at a glance.
          </p>
        </div>
        <div class="grid gap-12px">
          <div class="flex flex-wrap gap-12px items-center">
            <p class="text-h8">
              46 users
            </p>
            <div class="flex flex-wrap lg:flex-nowrap gap-12px ms-auto items-center w-full md:w-[unset]">
              <label class="flex flex-col gap-4px grow-1">
                <span class="flex gap-4px text-p3 font-medium items-center">
                  Search
                </span>
                <div class="flex flex-col relative">
                  <input
                    type="text"
                    name="search"
                    placeholder="Search"
                    class="flex gap-8px items-center text-p2 peer text-black py-8px rounded-8px border placeholder:text-black-500 outline-none transition-all dark:text-white dark:placeholder:text-black-400 ps-[40px] pe-16px bg-white border-accent-200 hover:border-accent-600 focus:border-accent-600 active:border-accent-600 user-invalid:border-red-600 user-invalid:hover:border-red-600 user-invalid:focus:border-red-600 user-invalid:active:border-red-600 user-invalid:bg-red-50 dark:bg-black dark:border-black-600 dark:hover:border-black-400 dark:focus:border-black-400 dark:active:border-black-400 dark:user-invalid:bg-red-900 dark:user-invalid:bg-black shadow-[0_1px_2px_0px_#0000000D] focus:shadow-[0_0_0_2px_#0F172A33] dark:shadow-[0_1px_2px_0px_rgba(255,255,255,0.06)] dark:focus:shadow-[0_0_0_2px_rgba(255,255,255,0.33)] disabled:bg-gray-50 disabled:border-gray-100 dark:disabled:bg-gray-800 dark:disabled:border-gray-700 disabled:shadow-none [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px bg-black-50! dark:bg-black-800! w-full"
                    pattern="[a-zA-Z0-9_]+"
                    value="">
                  </input>
                  <span class="absolute left-16px top-[14px] pointer-events-none">
                    <svg
                      width="16"
                      height="16"
                      viewbox="0 0 16 16"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg">
                      <g clip-path="url(#clip0_48_1939)">
                        <path
                          d="M6.66667 11.3333C9.244 11.3333 11.3333 9.244 11.3333 6.66667C11.3333 4.08934 9.244 2 6.66667 2C4.08934 2 2 4.08934 2 6.66667C2 9.244 4.08934 11.3333 6.66667 11.3333Z"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round">
                        </path>
                        <path
                          d="M14 14L10 10"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round">
                        </path>
                      </g>
                    </svg>
                  </span>
                </div>
              </label>
              <div class="flex flex-wrap gap-12px items-center w-full lg:w-[unset]">
                <button
                  name="button"
                  type="button"
                  class="flex gap-8px items-center justify-center whitespace-nowrap py-4px px-16px text-btn2 [&>svg]:w-16px [&>svg]:h-16px rounded-8px text-black dark:text-white border disabled:opacity-40 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-transparent border-black-100 hover:border-black focus:border-black active:bg-black-50 active:border-black dark:border-black-700 dark:hover:border-white dark:focus:border-white dark:active:bg-black-800 grow-1 lg:grow-[unset]"
                  title="Filter">
                  <svg
                    width="16"
                    height="16"
                    viewbox="0 0 16 16"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M7 4L13.5 4M7 4C7 4.55228 6.55228 5 6 5C5.44772 5 5 4.55228 5 4M7 4C7 3.44772 6.55229 3 6 3C5.44772 3 5 3.44771 5 4M2.5 4H5M7 12H13.5M7 12C7 12.5523 6.55228 13 6 13C5.44772 13 5 12.5523 5 12M7 12C7 11.4477 6.55228 11 6 11C5.44772 11 5 11.4477 5 12M2.5 12L5 12M11 8L13.5 8M11 8C11 8.55228 10.5523 9 10 9C9.44772 9 9 8.55228 9 8M11 8C11 7.44772 10.5523 7 10 7C9.44772 7 9 7.44771 9 8M2.5 8H9"
                      stroke="currentColor"
                      stroke-width="1.5"
                      stroke-linecap="round"
                      stroke-linejoin="round">
                    </path>
                  </svg>
                  Filter
                </button>
                <button
                  name="button"
                  type="button"
                  class="flex gap-8px items-center justify-center whitespace-nowrap py-4px px-16px text-btn2 [&>svg]:w-16px [&>svg]:h-16px rounded-8px text-white dark:text-accent-900 border disabled:opacity-30 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-accent-900 border-accent-900 hover:bg-accent-700 hover:border-accent-700 focus:bg-accent-700 focus:border-accent-700 active:bg-accent-500 active:border-accent-500 dark:bg-white dark:border-white dark:hover:bg-accent-200 dark:hover:border-accent-200 dark:focus:bg-accent-200 dark:focus:border-accent-200 dark:active:bg-accent-400 dark:active:border-accent-400 grow-1 lg:grow-[unset]"
                  title="Add user">
                  <svg
                    width="16"
                    height="16"
                    viewbox="0 0 16 16"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M8 3V13M13 8L3 8"
                      stroke="currentColor"
                      stroke-width="1.5"
                      stroke-linecap="round"
                      stroke-linejoin="round">
                    </path>
                  </svg>
                  Add user
                </button>
              </div>
            </div>
          </div>
          <div class="flex flex-col gap-16px overflow-auto">
            <div class="mx-auto w-full border border-black-100 dark:border-black-700 rounded-8px overflow-auto">
              <table class="w-full">
                <thead>
                  <tr class="text-left bg-black-50 dark:bg-black-800">
                    <th
                      class="p-8px text-black-700 dark:text-black-100 text-p4 [&_svg]:inline [&_svg]:ms-2px [&_svg]:transition-all [&_svg]:text-black-400 hover:[&_svg]:text-black-700 dark:hover:[&_svg]:text-black-100 min-w-[32px] w-32px"
                      scope="row">
                      <svg
                        width="14"
                        height="14"
                        viewbox="0 0 14 14"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                          d="M4.08325 8.74967L6.99992 11.6663L9.91659 8.74967M4.08325 5.24967L6.99992 2.33301L9.91659 5.24967"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round">
                        </path>
                      </svg>
                    </th>
                    <th
                      class="p-8px text-black-700 dark:text-black-100 text-p4 [&_svg]:inline [&_svg]:ms-2px [&_svg]:transition-all [&_svg]:text-black-400 hover:[&_svg]:text-black-700 dark:hover:[&_svg]:text-black-100 min-w-[261px] w-[261px]"
                      scope="col">
                      Name
                      <svg
                        width="14"
                        height="14"
                        viewbox="0 0 14 14"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                          d="M4.08325 8.74967L6.99992 11.6663L9.91659 8.74967M4.08325 5.24967L6.99992 2.33301L9.91659 5.24967"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round">
                        </path>
                      </svg>
                    </th>
                    <th
                      class="p-8px text-black-700 dark:text-black-100 text-p4 [&_svg]:inline [&_svg]:ms-2px [&_svg]:transition-all [&_svg]:text-black-400 hover:[&_svg]:text-black-700 dark:hover:[&_svg]:text-black-100 min-w-[100px]"
                      scope="col">
                      Role
                      <svg
                        width="14"
                        height="14"
                        viewbox="0 0 14 14"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                          d="M4.08325 8.74967L6.99992 11.6663L9.91659 8.74967M4.08325 5.24967L6.99992 2.33301L9.91659 5.24967"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round">
                        </path>
                      </svg>
                    </th>
                    <th
                      class="p-8px text-black-700 dark:text-black-100 text-p4 [&_svg]:inline [&_svg]:ms-2px [&_svg]:transition-all [&_svg]:text-black-400 hover:[&_svg]:text-black-700 dark:hover:[&_svg]:text-black-100 min-w-[330px] w-[330px]"
                      scope="col">
                      Location
                      <svg
                        width="14"
                        height="14"
                        viewbox="0 0 14 14"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                          d="M4.08325 8.74967L6.99992 11.6663L9.91659 8.74967M4.08325 5.24967L6.99992 2.33301L9.91659 5.24967"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round">
                        </path>
                      </svg>
                    </th>
                    <th
                      class="p-8px text-black-700 dark:text-black-100 text-p4 [&_svg]:inline [&_svg]:ms-2px [&_svg]:transition-all [&_svg]:text-black-400 hover:[&_svg]:text-black-700 dark:hover:[&_svg]:text-black-100 min-w-[230px]"
                      scope="col">
                      Date added
                      <svg
                        width="14"
                        height="14"
                        viewbox="0 0 14 14"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                          d="M4.08325 8.74967L6.99992 11.6663L9.91659 8.74967M4.08325 5.24967L6.99992 2.33301L9.91659 5.24967"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round">
                        </path>
                      </svg>
                    </th>
                  </tr>
                </thead>
                <tbody class="text-p3">
                  <tr class="border-t border-black-100 dark:border-black-700">
                    <th class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      <label class="flex gap-8px text-p2 items-center relative has-disabled:cursor-no-drop cursor-pointer">
                        <input
                          type="checkbox"
                          name="table-checkbox-44"
                          class="peer w-16px h-16px rounded-4px appearance-none border transition-all cursor-pointer bg-white border-black-300 hover:border-black active:border-black checked:border-black checked:bg-black checked:hover:bg-black-800 disabled:bg-black-50 disabled:border-black-100">
                        </input>
                        <svg
                          width="10"
                          height="8"
                          viewbox="0 0 10 8"
                          fill="none"
                          class="absolute left-[3px] hidden fill-white peer-checked:flex">
                          <path d="M3.84217 5.34246C3.72002 5.46514 3.5214 5.46514 3.39926 5.34246L1.63392 3.5693C1.33263 3.26667 0.842723 3.26667 0.541434 3.5693C0.242022 3.87003 0.242022 4.35622 0.541433 4.65696L3.1778 7.305C3.42209 7.55038 3.81933 7.55038 4.06362 7.30501L9.4584 1.88633C9.75781 1.58559 9.75781 1.0994 9.4584 0.79866C9.15711 0.496037 8.66721 0.496037 8.36592 0.798661L3.84217 5.34246Z">
                          </path>
                        </svg>
                      </label>
                    </th>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      <div class="flex gap-8px items-center">
                        <div class="flex rounded-full items-center justify-center bg-accent-100 overflow-hidden w-32px h-32px">
                          <img
                            src="/assets/images/shared/avatar.png"
                            class="object-cover w-full h-full"
                            loading="lazy"
                            alt="avatar">
                          </img>
                        </div>
                        <div class="flex flex-col">
                          <p class="text-h10">
                            Zoya Patel
                          </p>
                          <p class="text-p4 text-black-600 dark:text-black-300">
                            Project Manager
                          </p>
                        </div>
                      </div>
                    </td>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      <div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap bg-black-200 border-black-200 dark:bg-black-600 dark:border-black-600 text-black-800 dark:text-black-50 hover:bg-black-300 hover:border-black-300 dark:hover:bg-black-500 dark:hover:border-black-500 table-caption">
                        Admin
                      </div>
                    </td>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      Maplewood, Canada
                    </td>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      2025-12-31
                    </td>
                  </tr>
                  <tr class="border-t border-black-100 dark:border-black-700">
                    <th class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      <label class="flex gap-8px text-p2 items-center relative has-disabled:cursor-no-drop cursor-pointer">
                        <input
                          type="checkbox"
                          name="table-checkbox-77"
                          class="peer w-16px h-16px rounded-4px appearance-none border transition-all cursor-pointer bg-white border-black-300 hover:border-black active:border-black checked:border-black checked:bg-black checked:hover:bg-black-800 disabled:bg-black-50 disabled:border-black-100">
                        </input>
                        <svg
                          width="10"
                          height="8"
                          viewbox="0 0 10 8"
                          fill="none"
                          class="absolute left-[3px] hidden fill-white peer-checked:flex">
                          <path d="M3.84217 5.34246C3.72002 5.46514 3.5214 5.46514 3.39926 5.34246L1.63392 3.5693C1.33263 3.26667 0.842723 3.26667 0.541434 3.5693C0.242022 3.87003 0.242022 4.35622 0.541433 4.65696L3.1778 7.305C3.42209 7.55038 3.81933 7.55038 4.06362 7.30501L9.4584 1.88633C9.75781 1.58559 9.75781 1.0994 9.4584 0.79866C9.15711 0.496037 8.66721 0.496037 8.36592 0.798661L3.84217 5.34246Z">
                          </path>
                        </svg>
                      </label>
                    </th>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      <div class="flex gap-8px items-center">
                        <div class="flex rounded-full items-center justify-center bg-accent-100 overflow-hidden w-32px h-32px">
                          <img
                            src="/assets/images/shared/avatar.png"
                            class="object-cover w-full h-full"
                            loading="lazy"
                            alt="avatar">
                          </img>
                        </div>
                        <div class="flex flex-col">
                          <p class="text-h10">
                            Anya Matharu
                          </p>
                          <p class="text-p4 text-black-600 dark:text-black-300">
                            Software Engineer
                          </p>
                        </div>
                      </div>
                    </td>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      <div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap bg-black-200 border-black-200 dark:bg-black-600 dark:border-black-600 text-black-800 dark:text-black-50 hover:bg-black-300 hover:border-black-300 dark:hover:bg-black-500 dark:hover:border-black-500 table-caption">
                        Admin
                      </div>
                    </td>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      Oakridge, New Zealand
                    </td>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      2025-09-24
                    </td>
                  </tr>
                  <tr class="border-t border-black-100 dark:border-black-700">
                    <th class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      <label class="flex gap-8px text-p2 items-center relative has-disabled:cursor-no-drop cursor-pointer">
                        <input
                          type="checkbox"
                          name="table-checkbox-10"
                          class="peer w-16px h-16px rounded-4px appearance-none border transition-all cursor-pointer bg-white border-black-300 hover:border-black active:border-black checked:border-black checked:bg-black checked:hover:bg-black-800 disabled:bg-black-50 disabled:border-black-100">
                        </input>
                        <svg
                          width="10"
                          height="8"
                          viewbox="0 0 10 8"
                          fill="none"
                          class="absolute left-[3px] hidden fill-white peer-checked:flex">
                          <path d="M3.84217 5.34246C3.72002 5.46514 3.5214 5.46514 3.39926 5.34246L1.63392 3.5693C1.33263 3.26667 0.842723 3.26667 0.541434 3.5693C0.242022 3.87003 0.242022 4.35622 0.541433 4.65696L3.1778 7.305C3.42209 7.55038 3.81933 7.55038 4.06362 7.30501L9.4584 1.88633C9.75781 1.58559 9.75781 1.0994 9.4584 0.79866C9.15711 0.496037 8.66721 0.496037 8.36592 0.798661L3.84217 5.34246Z">
                          </path>
                        </svg>
                      </label>
                    </th>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      <div class="flex gap-8px items-center">
                        <div class="flex rounded-full items-center justify-center bg-accent-100 overflow-hidden w-32px h-32px">
                          <img
                            src="/assets/images/shared/avatar.png"
                            class="object-cover w-full h-full"
                            loading="lazy"
                            alt="avatar">
                          </img>
                        </div>
                        <div class="flex flex-col">
                          <p class="text-h10">
                            Arlo Wood
                          </p>
                          <p class="text-p4 text-black-600 dark:text-black-300">
                            Product Owner
                          </p>
                        </div>
                      </div>
                    </td>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      <div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap bg-background border-black-100 text-black-800 hover:bg-black-50 dark:hover:bg-black-50 dark:hover:text-black-800 disabled:opacity-40 table-caption">
                        View
                      </div>
                    </td>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      Ohio, USA
                    </td>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      2025-07-01
                    </td>
                  </tr>
                  <tr class="border-t border-black-100 dark:border-black-700">
                    <th class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      <label class="flex gap-8px text-p2 items-center relative has-disabled:cursor-no-drop cursor-pointer">
                        <input
                          type="checkbox"
                          name="table-checkbox-65"
                          class="peer w-16px h-16px rounded-4px appearance-none border transition-all cursor-pointer bg-white border-black-300 hover:border-black active:border-black checked:border-black checked:bg-black checked:hover:bg-black-800 disabled:bg-black-50 disabled:border-black-100">
                        </input>
                        <svg
                          width="10"
                          height="8"
                          viewbox="0 0 10 8"
                          fill="none"
                          class="absolute left-[3px] hidden fill-white peer-checked:flex">
                          <path d="M3.84217 5.34246C3.72002 5.46514 3.5214 5.46514 3.39926 5.34246L1.63392 3.5693C1.33263 3.26667 0.842723 3.26667 0.541434 3.5693C0.242022 3.87003 0.242022 4.35622 0.541433 4.65696L3.1778 7.305C3.42209 7.55038 3.81933 7.55038 4.06362 7.30501L9.4584 1.88633C9.75781 1.58559 9.75781 1.0994 9.4584 0.79866C9.15711 0.496037 8.66721 0.496037 8.36592 0.798661L3.84217 5.34246Z">
                          </path>
                        </svg>
                      </label>
                    </th>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      <div class="flex gap-8px items-center">
                        <div class="flex rounded-full items-center justify-center bg-accent-100 overflow-hidden w-32px h-32px">
                          <img
                            src="/assets/images/shared/avatar.png"
                            class="object-cover w-full h-full"
                            loading="lazy"
                            alt="avatar">
                          </img>
                        </div>
                        <div class="flex flex-col">
                          <p class="text-h10">
                            Sam Swift
                          </p>
                          <p class="text-p4 text-black-600 dark:text-black-300">
                            UX Designer
                          </p>
                        </div>
                      </div>
                    </td>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      <div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap bg-background border-black-100 text-black-800 hover:bg-black-50 dark:hover:bg-black-50 dark:hover:text-black-800 disabled:opacity-40 table-caption">
                        View
                      </div>
                    </td>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      Rome, Italy
                    </td>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      2025-06-16
                    </td>
                  </tr>
                  <tr class="border-t border-black-100 dark:border-black-700">
                    <th class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      <label class="flex gap-8px text-p2 items-center relative has-disabled:cursor-no-drop cursor-pointer">
                        <input
                          type="checkbox"
                          name="table-checkbox-60"
                          class="peer w-16px h-16px rounded-4px appearance-none border transition-all cursor-pointer bg-white border-black-300 hover:border-black active:border-black checked:border-black checked:bg-black checked:hover:bg-black-800 disabled:bg-black-50 disabled:border-black-100">
                        </input>
                        <svg
                          width="10"
                          height="8"
                          viewbox="0 0 10 8"
                          fill="none"
                          class="absolute left-[3px] hidden fill-white peer-checked:flex">
                          <path d="M3.84217 5.34246C3.72002 5.46514 3.5214 5.46514 3.39926 5.34246L1.63392 3.5693C1.33263 3.26667 0.842723 3.26667 0.541434 3.5693C0.242022 3.87003 0.242022 4.35622 0.541433 4.65696L3.1778 7.305C3.42209 7.55038 3.81933 7.55038 4.06362 7.30501L9.4584 1.88633C9.75781 1.58559 9.75781 1.0994 9.4584 0.79866C9.15711 0.496037 8.66721 0.496037 8.36592 0.798661L3.84217 5.34246Z">
                          </path>
                        </svg>
                      </label>
                    </th>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      <div class="flex gap-8px items-center">
                        <div class="flex rounded-full items-center justify-center bg-accent-100 overflow-hidden w-32px h-32px">
                          <img
                            src="/assets/images/shared/avatar.png"
                            class="object-cover w-full h-full"
                            loading="lazy"
                            alt="avatar">
                          </img>
                        </div>
                        <div class="flex flex-col">
                          <p class="text-h10">
                            Lily-Rose Archer
                          </p>
                          <p class="text-p4 text-black-600 dark:text-black-300">
                            QA Specialist
                          </p>
                        </div>
                      </div>
                    </td>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      <div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap bg-background border-black-100 text-black-800 hover:bg-black-50 dark:hover:bg-black-50 dark:hover:text-black-800 disabled:opacity-40 table-caption">
                        View
                      </div>
                    </td>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      Pine Valley, South Africa
                    </td>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      2025-05-13
                    </td>
                  </tr>
                  <tr class="border-t border-black-100 dark:border-black-700">
                    <th class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      <label class="flex gap-8px text-p2 items-center relative has-disabled:cursor-no-drop cursor-pointer">
                        <input
                          type="checkbox"
                          name="table-checkbox-4"
                          class="peer w-16px h-16px rounded-4px appearance-none border transition-all cursor-pointer bg-white border-black-300 hover:border-black active:border-black checked:border-black checked:bg-black checked:hover:bg-black-800 disabled:bg-black-50 disabled:border-black-100">
                        </input>
                        <svg
                          width="10"
                          height="8"
                          viewbox="0 0 10 8"
                          fill="none"
                          class="absolute left-[3px] hidden fill-white peer-checked:flex">
                          <path d="M3.84217 5.34246C3.72002 5.46514 3.5214 5.46514 3.39926 5.34246L1.63392 3.5693C1.33263 3.26667 0.842723 3.26667 0.541434 3.5693C0.242022 3.87003 0.242022 4.35622 0.541433 4.65696L3.1778 7.305C3.42209 7.55038 3.81933 7.55038 4.06362 7.30501L9.4584 1.88633C9.75781 1.58559 9.75781 1.0994 9.4584 0.79866C9.15711 0.496037 8.66721 0.496037 8.36592 0.798661L3.84217 5.34246Z">
                          </path>
                        </svg>
                      </label>
                    </th>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      <div class="flex gap-8px items-center">
                        <div class="flex rounded-full items-center justify-center bg-accent-100 overflow-hidden w-32px h-32px">
                          <img
                            src="/assets/images/shared/avatar.png"
                            class="object-cover w-full h-full"
                            loading="lazy"
                            alt="avatar">
                          </img>
                        </div>
                        <div class="flex flex-col">
                          <p class="text-h10">
                            Rohan Carter
                          </p>
                          <p class="text-p4 text-black-600 dark:text-black-300">
                            Project Manager
                          </p>
                        </div>
                      </div>
                    </td>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      <div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap bg-background border-black-100 text-black-800 hover:bg-black-50 dark:hover:bg-black-50 dark:hover:text-black-800 disabled:opacity-40 table-caption">
                        View
                      </div>
                    </td>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      Oakridge, New Zealand
                    </td>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      2025-05-1
                    </td>
                  </tr>
                  <tr class="border-t border-black-100 dark:border-black-700">
                    <th class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      <label class="flex gap-8px text-p2 items-center relative has-disabled:cursor-no-drop cursor-pointer">
                        <input
                          type="checkbox"
                          name="table-checkbox-58"
                          class="peer w-16px h-16px rounded-4px appearance-none border transition-all cursor-pointer bg-white border-black-300 hover:border-black active:border-black checked:border-black checked:bg-black checked:hover:bg-black-800 disabled:bg-black-50 disabled:border-black-100">
                        </input>
                        <svg
                          width="10"
                          height="8"
                          viewbox="0 0 10 8"
                          fill="none"
                          class="absolute left-[3px] hidden fill-white peer-checked:flex">
                          <path d="M3.84217 5.34246C3.72002 5.46514 3.5214 5.46514 3.39926 5.34246L1.63392 3.5693C1.33263 3.26667 0.842723 3.26667 0.541434 3.5693C0.242022 3.87003 0.242022 4.35622 0.541433 4.65696L3.1778 7.305C3.42209 7.55038 3.81933 7.55038 4.06362 7.30501L9.4584 1.88633C9.75781 1.58559 9.75781 1.0994 9.4584 0.79866C9.15711 0.496037 8.66721 0.496037 8.36592 0.798661L3.84217 5.34246Z">
                          </path>
                        </svg>
                      </label>
                    </th>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      <div class="flex gap-8px items-center">
                        <div class="flex rounded-full items-center justify-center bg-accent-100 overflow-hidden w-32px h-32px">
                          <img
                            src="/assets/images/shared/avatar.png"
                            class="object-cover w-full h-full"
                            loading="lazy"
                            alt="avatar">
                          </img>
                        </div>
                        <div class="flex flex-col">
                          <p class="text-h10">
                            Kiran Weiss
                          </p>
                          <p class="text-p4 text-black-600 dark:text-black-300">
                            Software Engineer
                          </p>
                        </div>
                      </div>
                    </td>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      <div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap bg-background border-black-100 text-black-800 hover:bg-black-50 dark:hover:bg-black-50 dark:hover:text-black-800 disabled:opacity-40 table-caption">
                        View
                      </div>
                    </td>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      Oakridge, New Zealand
                    </td>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      2025-03-29
                    </td>
                  </tr>
                  <tr class="border-t border-black-100 dark:border-black-700">
                    <th class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      <label class="flex gap-8px text-p2 items-center relative has-disabled:cursor-no-drop cursor-pointer">
                        <input
                          type="checkbox"
                          name="table-checkbox-84"
                          class="peer w-16px h-16px rounded-4px appearance-none border transition-all cursor-pointer bg-white border-black-300 hover:border-black active:border-black checked:border-black checked:bg-black checked:hover:bg-black-800 disabled:bg-black-50 disabled:border-black-100">
                        </input>
                        <svg
                          width="10"
                          height="8"
                          viewbox="0 0 10 8"
                          fill="none"
                          class="absolute left-[3px] hidden fill-white peer-checked:flex">
                          <path d="M3.84217 5.34246C3.72002 5.46514 3.5214 5.46514 3.39926 5.34246L1.63392 3.5693C1.33263 3.26667 0.842723 3.26667 0.541434 3.5693C0.242022 3.87003 0.242022 4.35622 0.541433 4.65696L3.1778 7.305C3.42209 7.55038 3.81933 7.55038 4.06362 7.30501L9.4584 1.88633C9.75781 1.58559 9.75781 1.0994 9.4584 0.79866C9.15711 0.496037 8.66721 0.496037 8.36592 0.798661L3.84217 5.34246Z">
                          </path>
                        </svg>
                      </label>
                    </th>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      <div class="flex gap-8px items-center">
                        <div class="flex rounded-full items-center justify-center bg-accent-100 overflow-hidden w-32px h-32px">
                          <img
                            src="/assets/images/shared/avatar.png"
                            class="object-cover w-full h-full"
                            loading="lazy"
                            alt="avatar">
                          </img>
                        </div>
                        <div class="flex flex-col">
                          <p class="text-h10">
                            Elora Becker
                          </p>
                          <p class="text-p4 text-black-600 dark:text-black-300">
                            Software Engineer
                          </p>
                        </div>
                      </div>
                    </td>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      <div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap bg-background border-black-100 text-black-800 hover:bg-black-50 dark:hover:bg-black-50 dark:hover:text-black-800 disabled:opacity-40 table-caption">
                        View
                      </div>
                    </td>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      London, UK
                    </td>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      2025-01-12
                    </td>
                  </tr>
                  <tr class="border-t border-black-100 dark:border-black-700">
                    <th class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      <label class="flex gap-8px text-p2 items-center relative has-disabled:cursor-no-drop cursor-pointer">
                        <input
                          type="checkbox"
                          name="table-checkbox-65"
                          class="peer w-16px h-16px rounded-4px appearance-none border transition-all cursor-pointer bg-white border-black-300 hover:border-black active:border-black checked:border-black checked:bg-black checked:hover:bg-black-800 disabled:bg-black-50 disabled:border-black-100">
                        </input>
                        <svg
                          width="10"
                          height="8"
                          viewbox="0 0 10 8"
                          fill="none"
                          class="absolute left-[3px] hidden fill-white peer-checked:flex">
                          <path d="M3.84217 5.34246C3.72002 5.46514 3.5214 5.46514 3.39926 5.34246L1.63392 3.5693C1.33263 3.26667 0.842723 3.26667 0.541434 3.5693C0.242022 3.87003 0.242022 4.35622 0.541433 4.65696L3.1778 7.305C3.42209 7.55038 3.81933 7.55038 4.06362 7.30501L9.4584 1.88633C9.75781 1.58559 9.75781 1.0994 9.4584 0.79866C9.15711 0.496037 8.66721 0.496037 8.36592 0.798661L3.84217 5.34246Z">
                          </path>
                        </svg>
                      </label>
                    </th>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      <div class="flex gap-8px items-center">
                        <div class="flex rounded-full items-center justify-center bg-accent-100 overflow-hidden w-32px h-32px">
                          <img
                            src="/assets/images/shared/avatar.png"
                            class="object-cover w-full h-full"
                            loading="lazy"
                            alt="avatar">
                          </img>
                        </div>
                        <div class="flex flex-col">
                          <p class="text-h10">
                            Leon Curtis
                          </p>
                          <p class="text-p4 text-black-600 dark:text-black-300">
                            Data Analyst
                          </p>
                        </div>
                      </div>
                    </td>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      <div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap bg-background border-black-100 text-black-800 hover:bg-black-50 dark:hover:bg-black-50 dark:hover:text-black-800 disabled:opacity-40 table-caption">
                        View
                      </div>
                    </td>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      Ohio, USA
                    </td>
                    <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
                      2025-01-08
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <nav class="flex gap-12px md:gap-16px justify-center-safe items-center overflow-auto">
              <a
                class="flex items-center no-underline py-4px px-16px rounded-8px gap-4px text-btn3 text-foreground border border-transparent hover:border-foreground active:border-foreground"
                href="#">
                <svg
                  width="16"
                  height="16"
                  viewbox="0 0 16 16"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M10 3L5 8L10 13"
                    stroke="currentColor"
                    stroke-width="1.5">
                  </path>
                </svg>
                Back
              </a>
              <ul class="flex gap-12px">
                <li class="flex">
                  <a
                    class="flex w-32px h-32px items-center justify-center no-underline text-btn3 rounded-8px border border-transparent hover:border-foreground active:border-foreground"
                    href="#">
                    1
                  </a>
                </li>
                <li class="flex">
                  <a
                    class="flex w-32px h-32px items-center justify-center no-underline text-btn3 rounded-8px border border-foreground bg-foreground text-background"
                    href="#">
                    2
                  </a>
                </li>
                <li class="flex">
                  <a
                    class="flex w-32px h-32px items-center justify-center no-underline text-btn3 rounded-8px border border-transparent hover:border-foreground active:border-foreground"
                    href="#">
                    3
                  </a>
                </li>
                <li class="flex">
                  <a
                    class="flex w-32px h-32px items-center justify-center no-underline text-btn3 rounded-8px border border-transparent hover:border-foreground active:border-foreground"
                    href="#">
                    4
                  </a>
                </li>
                <li class="flex">
                  <a
                    class="flex w-32px h-32px items-center justify-center no-underline text-btn3 rounded-8px border border-transparent hover:border-foreground active:border-foreground"
                    href="#">
                    5
                  </a>
                </li>
              </ul>
              <a
                class="flex items-center no-underline py-4px px-16px rounded-8px gap-4px text-btn3 text-foreground border border-transparent hover:border-foreground active:border-foreground"
                href="#">
                Next
                <svg
                  width="16"
                  height="16"
                  viewbox="0 0 16 16"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M6 13L11 8L6 3"
                    stroke="currentColor"
                    stroke-width="1.5">
                  </path>
                </svg>
              </a>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>