<!-- First -->
  <div
    x-data="usePopper({placement:'bottom-start',offset:4})"
    @click.outside="if(isShowPopper) isShowPopper = false"
    class="inline-flex"
  >
    <button
      class="btn  space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
      x-ref="popperRef"
      @click="isShowPopper = !isShowPopper"
    >
      <span>Dropdown</span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="size-4 transition-transform duration-200"
        :class="isShowPopper && 'rotate-180'"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="2"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </button>
    <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
      <div
        class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
      >
        <ul>
          <li>
            <a
              href="#"
              class="flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Action</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Another Action</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Something else</a
            >
          </li>
        </ul>
        <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
        <ul>
          <li>
            <a
              href="#"
              class="flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Separated Link</a
            >
          </li>
        </ul>
      </div>
    </div>
  </div>

  <!-- Second -->
  <div
    x-data="usePopper({placement:'bottom-start',offset:4})"
    @click.outside="if(isShowPopper) isShowPopper = false"
    class="inline-flex"
  >
    <button
      class="btn  space-x-2 rounded-full bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
      x-ref="popperRef"
      @click="isShowPopper = !isShowPopper"
    >
      <span>Dropdown</span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="size-4 transition-transform duration-200"
        :class="isShowPopper && 'rotate-180'"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="2"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </button>
    <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
      <div
        class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
      >
        <ul>
          <li>
            <a
              href="#"
              class="flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Action</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Another Action</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Something else</a
            >
          </li>
        </ul>
        <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
        <ul>
          <li>
            <a
              href="#"
              class="flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Separated Link</a
            >
          </li>
        </ul>
      </div>
    </div>
  </div>

  <!-- Third -->
  <div
    x-data="usePopper({placement:'bottom-end',offset:4})"
    @click.outside="if(isShowPopper) isShowPopper = false"
    class="inline-flex"
  >
    <button
      x-ref="popperRef"
      @click="isShowPopper = !isShowPopper"
      class="btn size-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="size-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="2"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
        />
      </svg>
    </button>

    <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
      <div
        class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
      >
        <ul>
          <li>
            <a
              href="#"
              class="flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Action</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Another Action</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Something else</a
            >
          </li>
        </ul>
        <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
        <ul>
          <li>
            <a
              href="#"
              class="flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Separated Link</a
            >
          </li>
        </ul>
      </div>
    </div>
  </div>

  <!-- Fourth -->
  <div
    x-data="usePopper({placement:'bottom-end',offset:4})"
    @click.outside="if(isShowPopper) isShowPopper = false"
    class="inline-flex"
  >
    <button
      x-ref="popperRef"
      @click="isShowPopper = !isShowPopper"
      class="btn size-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="size-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="2"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
        ></path>
      </svg>
    </button>

    <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
      <div
        class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
      >
        <ul>
          <li>
            <a
              href="#"
              class="flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Action</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Another Action</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Something else</a
            >
          </li>
        </ul>
        <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
        <ul>
          <li>
            <a
              href="#"
              class="flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Separated Link</a
            >
          </li>
        </ul>
      </div>
    </div>
  </div>

              

                
  <div
    x-data="usePopper({placement:'bottom-start',offset:4})"
    @click.outside="if(isShowPopper) isShowPopper = false"
    class="inline-flex"
  >
    <button
      class="btn  space-x-2 bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
      x-ref="popperRef"
      @click="isShowPopper = !isShowPopper"
    >
      <span>Dropdown</span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="size-4 transition-transform duration-200"
        :class="isShowPopper && 'rotate-180'"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="2"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </button>
    <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
      <div
        class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
      >
        <ul>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pl-8 font-medium tracking-wide outline-hidden transition-all hover:bg-primary hover:text-white focus:bg-primary focus:text-white dark:hover:bg-accent dark:focus:bg-accent"
              >Action</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pl-8 font-medium tracking-wide outline-hidden transition-all hover:bg-primary hover:text-white focus:bg-primary focus:text-white dark:hover:bg-accent dark:focus:bg-accent"
              >Another Action</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pl-8 font-medium tracking-wide outline-hidden transition-all hover:bg-primary hover:text-white focus:bg-primary focus:text-white dark:hover:bg-accent dark:focus:bg-accent"
              >Something Else</a
            >
          </li>
        </ul>
        <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
        <ul>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pl-8 font-medium tracking-wide outline-hidden transition-all hover:bg-primary hover:text-white focus:bg-primary focus:text-white dark:hover:bg-accent dark:focus:bg-accent"
              >Separated Link</a
            >
          </li>
        </ul>
      </div>
    </div>
  </div>
              

                
  <div
    x-data="usePopper({placement:'bottom-start',offset:4})"
    @click.outside="if(isShowPopper) isShowPopper = false"
    class="inline-flex"
  >
    <button
      class="btn  space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
      x-ref="popperRef"
      @click="isShowPopper = !isShowPopper"
    >
      <span>Dropdown</span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="size-4 transition-transform duration-200"
        :class="isShowPopper && 'rotate-180'"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="2"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </button>
    <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
      <div
        class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
      >
        <ul>
          <li>
            <a
              href="#"
              class="flex h-8 items-center  space-x-3 px-3 pl-8 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="mt-px size-4.5"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                stroke-width="1.5"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                />
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                />
              </svg>
              <span> View</span></a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center  space-x-3 px-3 pl-8 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-4.5"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                stroke-width="1.5"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
                />
              </svg>
              <span> Edit</span></a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center  space-x-3 px-3 pl-8 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-4.5"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                stroke-width="1.5"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
                />
              </svg>
              <span> Update</span></a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center  space-x-3 px-3 pl-8 font-medium tracking-wide text-error outline-hidden transition-all hover:bg-error/20 focus:bg-error/20"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-4.5"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                stroke-width="1.5"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
                />
              </svg>
              <span> Delete item</span></a
            >
          </li>
        </ul>
      </div>
    </div>
  </div>
              

                
  <div
    x-data="usePopper({placement:'bottom-start',offset:4})"
    @click.outside="if(isShowPopper) isShowPopper = false"
    class="inline-flex"
  >
    <button
      class="btn  space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
      x-ref="popperRef"
      @click="isShowPopper = !isShowPopper"
    >
      <span>Dropdown</span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="size-4 transition-transform duration-200"
        :class="isShowPopper && 'rotate-180'"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="2"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </button>
    <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
      <div
        class="popper-box h-36 overflow-y-auto rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-600 dark:bg-navy-700"
      >
        <ul>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pl-8 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Action</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pl-8 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Another Action</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pl-8 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Something else</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pl-8 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Something else</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pl-8 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Something else</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pl-8 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Something else</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pl-8 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Something else</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pl-8 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Something else</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pl-8 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Something else</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pl-8 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Something else</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pl-8 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Something else</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pl-8 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Something else</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pl-8 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Something else</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pl-8 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Something else</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pl-8 font-medium tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Something else</a
            >
          </li>
        </ul>
      </div>
    </div>
  </div>

                
              

                
  <div
    x-data="usePopper({placement:'bottom-start',offset:4})"
    @click.outside="if(isShowPopper) isShowPopper = false"
    class="inline-flex"
  >
    <button
      class="btn  space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
      x-ref="popperRef"
      @click="isShowPopper = !isShowPopper"
    >
      <span>Dropdown</span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="size-4 transition-transform duration-200"
        :class="isShowPopper && 'rotate-180'"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="2"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </button>
    <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
      <div
        class="popper-box w-72 rounded-md border border-slate-150 bg-white dark:border-navy-600 dark:bg-navy-700"
      >
        <h3
          class="px-4 py-3 font-medium tracking-wide text-slate-700 dark:text-navy-100"
        >
          Only Selected People
        </h3>
        <label class="relative flex">
          <input
            type="text"
            class="form-input peer w-full border-y border-slate-150 bg-transparent px-4 py-2 pr-9 text-xs-plus placeholder:text-slate-400/70 dark:border-navy-600"
            placeholder="Type username..."
          />
          <div
            class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="size-4.5 transition-colors duration-200"
              fill="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                d="M3.316 13.781l.73-.171-.73.171zm0-5.457l.73.171-.73-.171zm15.473 0l.73-.171-.73.171zm0 5.457l.73.171-.73-.171zm-5.008 5.008l-.171-.73.171.73zm-5.457 0l-.171.73.171-.73zm0-15.473l-.171-.73.171.73zm5.457 0l.171-.73-.171.73zM20.47 21.53a.75.75 0 101.06-1.06l-1.06 1.06zM4.046 13.61a11.198 11.198 0 010-5.115l-1.46-.342a12.698 12.698 0 000 5.8l1.46-.343zm14.013-5.115a11.196 11.196 0 010 5.115l1.46.342a12.698 12.698 0 000-5.8l-1.46.343zm-4.45 9.564a11.196 11.196 0 01-5.114 0l-.342 1.46c1.907.448 3.892.448 5.8 0l-.343-1.46zM8.496 4.046a11.198 11.198 0 015.115 0l.342-1.46a12.698 12.698 0 00-5.8 0l.343 1.46zm0 14.013a5.97 5.97 0 01-4.45-4.45l-1.46.343a7.47 7.47 0 005.568 5.568l.342-1.46zm5.457 1.46a7.47 7.47 0 005.568-5.567l-1.46-.342a5.97 5.97 0 01-4.45 4.45l.342 1.46zM13.61 4.046a5.97 5.97 0 014.45 4.45l1.46-.343a7.47 7.47 0 00-5.568-5.567l-.342 1.46zm-5.457-1.46a7.47 7.47 0 00-5.567 5.567l1.46.342a5.97 5.97 0 014.45-4.45l-.343-1.46zm8.652 15.28l3.665 3.664 1.06-1.06-3.665-3.665-1.06 1.06z"
              ></path>
            </svg>
          </div>
        </label>
        <ul class="my-2">
          <li>
            <a
              href="#"
              class="flex items-center  space-x-3.5 px-4 py-2 pr-8 tracking-wide outline-hidden transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
            >
              <div class="avatar size-10">
                <img
                  class="rounded-full"
                  src="images/avatar/avatar-10.jpg"
                  alt="avatar"
                />
              </div>
              <div>
                <p class="text-slate-700 line-clamp-1 dark:text-navy-100">
                  Simon Tods
                </p>
                <p class="text-xs text-slate-500 dark:text-navy-300">
                  Web Developer
                </p>
              </div>
            </a>
          </li>
          <li>
            <a
              href="#"
              class="flex items-center  space-x-3.5 px-4 py-2 pr-8 tracking-wide outline-hidden transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
            >
              <div class="avatar size-10">
                <div
                  class="is-initial rounded-full border border-success/30 bg-success/10 uppercase text-success"
                >
                  jd
                </div>
              </div>

              <div>
                <p class="text-slate-700 line-clamp-1 dark:text-navy-100">
                  John Doe
                </p>
                <p class="text-xs text-slate-500 dark:text-navy-300">
                  Web Developer
                </p>
              </div>
            </a>
          </li>
          <li>
            <a
              href="#"
              class="flex items-center  space-x-3.5 px-4 py-2 pr-8 tracking-wide outline-hidden transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
            >
              <div class="avatar size-10">
                <div
                  class="is-initial rounded-full bg-warning uppercase text-white"
                >
                  KG
                </div>
              </div>
              <div>
                <p class="text-slate-700 line-clamp-1 dark:text-navy-100">
                  Konnor Guzman
                </p>
                <p class="text-xs text-slate-500 dark:text-navy-300">
                  Frontend Developer
                </p>
              </div>
            </a>
          </li>
          <li>
            <a
              href="#"
              class="flex items-center  space-x-3.5 px-4 py-2 pr-8 tracking-wide outline-hidden transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
            >
              <div class="avatar size-10">
                <img
                  class="rounded-full"
                  src="images/avatar/avatar-12.jpg"
                  alt="avatar"
                />
              </div>
              <div>
                <p class="text-slate-700 line-clamp-1 dark:text-navy-100">
                  Samantha Shelton
                </p>
                <p class="text-xs text-slate-500 dark:text-navy-300">
                  Web Developer
                </p>
              </div>
            </a>
          </li>
          <li>
            <a
              href="#"
              class="flex items-center  space-x-3.5 px-4 py-2 pr-8 tracking-wide outline-hidden transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
            >
              <div class="avatar size-10">
                <img
                  class="rounded-full"
                  src="images/avatar/avatar-19.jpg"
                  alt="avatar"
                />
              </div>
              <div>
                <p class="text-slate-700 line-clamp-1 dark:text-navy-100">
                  Derrick Simmons
                </p>
                <p class="text-xs text-slate-500 dark:text-navy-300">
                  UI/UX Designer
                </p>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>