<div
    x-data="usePopper({
       offset: 12,
       placement: 'right-end',
       modifiers: [
          {name: 'flip', options: {fallbackPlacements: ['bottom','top']}},
          {name: 'preventOverflow', options: {padding: 10}}
       ]
    })"
    @click.outside="if(isShowPopper) isShowPopper = false"
    class="flex"
  >
    <button
      class="btn 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"
    >
      Basic Popover
    </button>
    <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
      <div class="popper-box max-w-xs">
        <div
          class="rounded-md border border-slate-150 bg-white p-4 dark:border-navy-600 dark:bg-navy-700"
        >
          <h3
            class="text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100"
          >
            UI/UX Design
          </h3>
          <p class="mt-2">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </p>
          <div class="mt-3 flex  space-x-2">
            <a
              href="#"
              class="tag bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
            >
              Tag 2
            </a>
            <a
              href="#"
              class="tag bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
            >
              Tag 3
            </a>
          </div>
          <p class="mt-3 text-xs text-slate-400 dark:text-navy-300">
            Lorem ipsum dolor sit amet, elit.
          </p>
        </div>
        <div class="size-4" data-popper-arrow>
          <svg
            viewBox="0 0 16 9"
            xmlns="http://www.w3.org/2000/svg"
            class="absolute size-4"
            fill="currentColor"
          >
            <path
              class="text-slate-150 dark:text-navy-600"
              d="M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z"
            />
            <path
              class="text-white dark:text-navy-700"
              d="M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z"
            />
          </svg>
        </div>
      </div>
    </div>
              

                
  <div
    x-data="usePopper({
       offset: 12,
       placement: 'right-end',
       modifiers: [
          {name: 'flip', options: {fallbackPlacements: ['bottom','top']}},
          {name: 'preventOverflow', options: {padding: 10}}
       ]
    })"
    @click.outside="if(isShowPopper) isShowPopper = false"
    class="flex"
  >
    <button
      class="btn 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"
    >
      Lessons
    </button>
    <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
      <div class="popper-box max-w-xs">
        <div
          class="rounded-md border border-slate-150 bg-white py-3 px-4 dark:border-navy-600 dark:bg-navy-700"
        >
          <h3
            class="text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100"
          >
            Group Lesson
          </h3>

          <div class="mt-3">
            <p class="font-medium text-slate-600 dark:text-navy-100">
              Social Media Marketing
            </p>
            <p class="mt-1 text-xs">
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </p>
          </div>
          <div class="mt-4 flex flex-wrap -space-x-2">
            <div class="avatar size-8 hover:z-10">
              <img
                class="rounded-full ring-2 ring-white dark:ring-navy-700"
                src="images/avatar/avatar-16.jpg"
                alt="avatar"
              />
            </div>

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

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

            <div class="avatar size-8 hover:z-10">
              <img
                class="rounded-full ring-2 ring-white dark:ring-navy-700"
                src="images/avatar/avatar-19.jpg"
                alt="avatar"
              />
            </div>
          </div>
          <div class="mt-4 flex items-center justify-between">
            <p class="flex items-center  space-x-2">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-4.5 text-slate-400 dark:text-navy-300"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="1.5"
                  d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                ></path>
              </svg>
              <span class="text-xs">25 May, 2022</span>
            </p>
            <button
              class="btn size-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 hover:shadow-lg hover:shadow-slate-200/50 focus:bg-slate-200 focus:shadow-lg focus:shadow-slate-200/50 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:hover:shadow-navy-450/50 dark:focus:bg-navy-450 dark:focus:shadow-navy-450/50 dark:active:bg-navy-450/90"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5 rotate-45"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M7 11l5-5m0 0l5 5m-5-5v12"
                ></path>
              </svg>
            </button>
          </div>
        </div>
        <div class="size-4" data-popper-arrow>
          <svg
            viewBox="0 0 16 9"
            xmlns="http://www.w3.org/2000/svg"
            class="absolute size-4"
            fill="currentColor"
          >
            <path
              class="text-slate-150 dark:text-navy-600"
              d="M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z"
            />
            <path
              class="text-white dark:text-navy-700"
              d="M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z"
            />
          </svg>
        </div>
      </div>
    </div>
              

                
  <div
    x-data="usePopper({
       offset: 12,
       placement: 'auto',
       modifiers: [
          {name: 'preventOverflow', options: {padding: 10}}
       ]
    })"
    @click.outside="if(isShowPopper) isShowPopper = false"
    class="flex"
  >
    <button
      class="btn 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"
    >
      Choose Columns
    </button>
    <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
      <div class="popper-box max-w-[16rem]">
        <div
          class="rounded-md border border-slate-150 bg-white p-4 dark:border-navy-600 dark:bg-navy-700"
        >
          <h3
            class="text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100"
          >
            Select Columns
          </h3>
          <p class="mt-1 text-xs-plus">Lorem ipsum dolor sit amet, consectetur.</p>
          <div
            class="mt-4 flex flex-col space-y-4 text-slate-600 dark:text-navy-100"
          >
            <label class="inline-flex items-center  space-x-2">
              <input
                checked
                class="form-checkbox is-basic size-5 rounded-sm border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
                type="checkbox"
              />
              <p>ID</p>
            </label>
            <label class="inline-flex items-center  space-x-2">
              <input
                checked
                class="form-checkbox is-basic size-5 rounded-sm border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
                type="checkbox"
              />
              <p>Name</p>
            </label>
            <label class="inline-flex items-center  space-x-2">
              <input
                checked
                class="form-checkbox is-basic size-5 rounded-sm border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
                type="checkbox"
              />
              <p>Email</p>
            </label>
            <label class="inline-flex items-center  space-x-2">
              <input
                class="form-checkbox is-basic size-5 rounded-sm border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
                type="checkbox"
              />
              <p>Address</p>
            </label>
          </div>
          <div class="my-4 h-px bg-slate-200 dark:bg-navy-500"></div>
          <div
            class="flex flex-col space-y-4 text-slate-600 dark:text-navy-100"
          >
            <label class="inline-flex items-center  space-x-2">
              <input
                checked
                class="form-checkbox is-basic size-5 rounded-sm border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
                type="checkbox"
              />
              <p>Created at</p>
            </label>
            <label class="inline-flex items-center  space-x-2">
              <input
                class="form-checkbox is-basic size-5 rounded-sm border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
                type="checkbox"
              />
              <p>Updated at</p>
            </label>
          </div>
          <button
            @click="isShowPopper=false"
            class="btn mt-4 h-8 w-full rounded-md bg-primary px-4 text-xs-plus 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"
          >
            Apply
          </button>
        </div>
        <div class="size-4" data-popper-arrow>
          <svg
            viewBox="0 0 16 9"
            xmlns="http://www.w3.org/2000/svg"
            class="absolute size-4"
            fill="currentColor"
          >
            <path
              class="text-slate-150 dark:text-navy-600"
              d="M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z"
            />
            <path
              class="text-white dark:text-navy-700"
              d="M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z"
            />
          </svg>
        </div>
      </div>
    </div>
              

                
  <div class="flex flex-wrap justify-center -space-x-2 sm:justify-start">
    <div
      x-data="usePopper({
         offset: 12,
         placement: 'top',
         modifiers: [
            {name: 'preventOverflow', options: {padding: 10}}
         ]                     
      })"
      class="flex"
      @mouseleave="isShowPopper = false"
      @mouseenter="isShowPopper = true"
    >
      <div x-ref="popperRef" class="avatar size-8 hover:z-10">
        <img
          class="rounded-full ring-2 ring-white dark:ring-navy-700"
          src="images/avatar/avatar-19.jpg"
          alt="avatar"
        />
      </div>
      <div
        x-ref="popperRoot"
        class="popper-root"
        :class="isShowPopper && 'show'"
      >
        <div class="popper-box">
          <div
            class="w-48 rounded-md border border-slate-150 bg-white px-4 py-5 text-center dark:border-navy-600 dark:bg-navy-700"
          >
            <div class="avatar size-16">
              <img
                class="rounded-full"
                src="images/avatar/avatar-19.jpg"
                alt="avatar"
              />
            </div>
            <p
              class="pt-2 text-base font-medium tracking-wide text-slate-700 dark:text-navy-100"
            >
              John Doe
            </p>
            <a
              href="#"
              class="font-inter tracking-wide hover:text-primary focus:text-primary dark:hover:text-accent-light dark:focus:text-accent-light"
              >@johndoeaccount</a
            >
            <button
              class="btn mt-4 h-8 rounded-full bg-primary px-4 text-xs-plus 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"
            >
              Follow
            </button>
          </div>
          <div class="size-4" data-popper-arrow>
            <svg
              viewBox="0 0 16 9"
              xmlns="http://www.w3.org/2000/svg"
              class="absolute size-4"
              fill="currentColor"
            >
              <path
                class="text-slate-150 dark:text-navy-600"
                d="M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z"
              />
              <path
                class="text-white dark:text-navy-700"
                d="M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z"
              />
            </svg>
          </div>
        </div>
      </div>
    </div>
    <div
      x-data="usePopper({
         offset: 12,
         placement: 'top',    
         modifiers: [
            {name: 'preventOverflow', options: {padding: 10}}
         ]                    
      })"
      class="flex"
      @mouseleave="isShowPopper = false"
      @mouseenter="isShowPopper = true"
    >
      <div x-ref="popperRef" class="avatar size-8 hover:z-10">
        <img
          class="rounded-full ring-2 ring-white dark:ring-navy-700"
          src="images/avatar/avatar-11.jpg"
          alt="avatar"
        />
      </div>
      <div
        x-ref="popperRoot"
        class="popper-root"
        :class="isShowPopper && 'show'"
      >
        <div class="popper-box">
          <div
            class="w-48 rounded-md border border-slate-150 bg-white px-4 py-5 text-center dark:border-navy-600 dark:bg-navy-700"
          >
            <div class="avatar size-16">
              <img
                class="rounded-full"
                src="images/avatar/avatar-11.jpg"
                alt="avatar"
              />
            </div>
            <p
              class="pt-2 text-base font-medium tracking-wide text-slate-700 dark:text-navy-100"
            >
              Sally Ramos
            </p>
            <a
              href="#"
              class="font-inter tracking-wide hover:text-primary focus:text-primary dark:hover:text-accent-light dark:focus:text-accent-light"
              >@sallyramos
            </a>
            <button
              class="btn mt-4 h-8 rounded-full bg-primary px-4 text-xs-plus 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"
            >
              Follow
            </button>
          </div>
          <div class="size-4" data-popper-arrow>
            <svg
              viewBox="0 0 16 9"
              xmlns="http://www.w3.org/2000/svg"
              class="absolute size-4"
              fill="currentColor"
            >
              <path
                class="text-slate-150 dark:text-navy-600"
                d="M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z"
              />
              <path
                class="text-white dark:text-navy-700"
                d="M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z"
              />
            </svg>
          </div>
        </div>
      </div>
    </div>
    <div
      x-data="usePopper({
         offset: 12,
         placement: 'top',  
         modifiers: [
            {name: 'preventOverflow', options: {padding: 10}}
         ]                      
      })"
      class="flex"
      @mouseleave="isShowPopper = false"
      @mouseenter="isShowPopper = true"
    >
      <div x-ref="popperRef" class="avatar size-8 hover:z-10">
        <img
          class="rounded-full ring-2 ring-white dark:ring-navy-700"
          src="images/avatar/avatar-8.jpg"
          alt="avatar"
        />
      </div>
      <div
        x-ref="popperRoot"
        class="popper-root"
        :class="isShowPopper && 'show'"
      >
        <div class="popper-box">
          <div
            class="w-48 rounded-md border border-slate-150 bg-white px-4 py-5 text-center dark:border-navy-600 dark:bg-navy-700"
          >
            <div class="avatar size-16">
              <img
                class="rounded-full"
                src="images/avatar/avatar-8.jpg"
                alt="avatar"
              />
            </div>
            <p
              class="pt-2 text-base font-medium tracking-wide text-slate-700 dark:text-navy-100"
            >
              Katrina West
            </p>
            <a
              href="#"
              class="font-inter tracking-wide hover:text-primary focus:text-primary dark:hover:text-accent-light dark:focus:text-accent-light"
              >@katrinawest
            </a>
            <button
              class="btn mt-4 h-8 rounded-full bg-primary px-4 text-xs-plus 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"
            >
              Follow
            </button>
          </div>
          <div class="size-4" data-popper-arrow>
            <svg
              viewBox="0 0 16 9"
              xmlns="http://www.w3.org/2000/svg"
              class="absolute size-4"
              fill="currentColor"
            >
              <path
                class="text-slate-150 dark:text-navy-600"
                d="M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z"
              />
              <path
                class="text-white dark:text-navy-700"
                d="M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z"
              />
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
                
              

                
  <div class="flex flex-wrap justify-center -space-x-2 sm:justify-start">
    <div
      x-data="usePopper({
         offset: 12,
         placement: 'top',
         modifiers: [
            {name: 'preventOverflow', options: {padding: 10}}
         ]                     
      })"
      class="flex"
      @mouseleave="isShowPopper = false"
      @mouseenter="isShowPopper = true"
    >
      <div x-ref="popperRef" class="avatar size-8 hover:z-10">
        <img
          class="rounded-full ring-2 ring-white dark:ring-navy-700"
          src="images/avatar/avatar-19.jpg"
          alt="avatar"
        />
      </div>
      <div
        x-ref="popperRoot"
        class="popper-root"
        :class="isShowPopper && 'show'"
      >
        <div class="popper-box">
          <div
            class="w-72 rounded-md border border-slate-150 bg-white p-3 dark:border-navy-600 dark:bg-navy-700"
          >
            <div class="flex  space-x-3">
              <div class="avatar size-10">
                <img
                  class="rounded-full"
                  src="images/avatar/avatar-19.jpg"
                  alt="avatar"
                />
              </div>
              <div class="flex w-full items-start justify-between">
                <div>
                  <p
                    class="text-xs-plus font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
                  >
                    Konnor G.
                  </p>
                  <p
                    class="text-xs text-primary line-clamp-1 dark:text-accent-light"
                  >
                    Web Developer
                  </p>
                </div>
                <div
                  class="badge h-5  space-x-1.5 rounded-full bg-success/10 px-1.5 text-success dark:bg-success/15"
                >
                  <div class="size-1.5 rounded-full bg-current"></div>
                  <span>Free</span>
                </div>
              </div>
            </div>
            <p class="pt-2 text-xs text-slate-400 dark:text-navy-300">
              Lorem ipsum dolor sit, amet consectetur adipisicing elit.
              Consequuntur.
            </p>
            <div class="flex justify-end  space-x-1 pt-4">
              <button
                class="btn size-7 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-4.5"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  stroke-width="1.5"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
                  />
                </svg>
              </button>
              <button
                class="btn size-7 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-4.5"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  stroke-width="1.5"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
                  />
                </svg>
              </button>
              <button
                class="btn size-7 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-4.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"
                  />
                </svg>
              </button>
            </div>
          </div>
          <div class="size-4" data-popper-arrow>
            <svg
              viewBox="0 0 16 9"
              xmlns="http://www.w3.org/2000/svg"
              class="absolute size-4"
              fill="currentColor"
            >
              <path
                class="text-slate-150 dark:text-navy-600"
                d="M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z"
              />
              <path
                class="text-white dark:text-navy-700"
                d="M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z"
              />
            </svg>
          </div>
        </div>
      </div>
    </div>
    <div
      x-data="usePopper({
       offset: 12,
       placement: 'top',
       modifiers: [
          {name: 'preventOverflow', options: {padding: 10}}
       ]                     
    })"
      class="flex"
      @mouseleave="isShowPopper = false"
      @mouseenter="isShowPopper = true"
    >
      <div x-ref="popperRef" class="avatar size-8 hover:z-10">
        <img
          class="rounded-full ring-2 ring-white dark:ring-navy-700"
          src="images/avatar/avatar-12.jpg"
          alt="avatar"
        />
      </div>
      <div
        x-ref="popperRoot"
        class="popper-root"
        :class="isShowPopper && 'show'"
      >
        <div class="popper-box">
          <div
            class="w-72 rounded-md border border-slate-150 bg-white p-3 dark:border-navy-600 dark:bg-navy-700"
          >
            <div class="flex  space-x-3">
              <div class="avatar size-10">
                <img
                  class="rounded-full"
                  src="images/avatar/avatar-12.jpg"
                  alt="avatar"
                />
              </div>
              <div class="flex w-full items-start justify-between">
                <div>
                  <p
                    class="text-xs-plus font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
                  >
                    John D.
                  </p>
                  <p
                    class="text-xs text-primary line-clamp-1 dark:text-accent-light"
                  >
                    UI/UX Designer
                  </p>
                </div>
                <div
                  class="badge h-5  space-x-1.5 rounded-full bg-error/10 px-1.5 text-error dark:bg-error/15"
                >
                  <div class="size-1.5 rounded-full bg-current"></div>
                  <span>Busy</span>
                </div>
              </div>
            </div>
            <p class="pt-2 text-xs text-slate-400 dark:text-navy-300">
              Lorem ipsum dolor sit, amet consectetur adipisicing elit.
              Consequuntur.
            </p>
            <div class="flex justify-end  space-x-1 pt-4">
              <button
                class="btn size-7 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-4.5"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  stroke-width="1.5"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
                  />
                </svg>
              </button>
              <button
                class="btn size-7 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-4.5"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  stroke-width="1.5"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
                  />
                </svg>
              </button>
              <button
                class="btn size-7 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-4.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"
                  />
                </svg>
              </button>
            </div>
          </div>
          <div class="size-4" data-popper-arrow>
            <svg
              viewBox="0 0 16 9"
              xmlns="http://www.w3.org/2000/svg"
              class="absolute size-4"
              fill="currentColor"
            >
              <path
                class="text-slate-150 dark:text-navy-600"
                d="M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z"
              />
              <path
                class="text-white dark:text-navy-700"
                d="M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z"
              />
            </svg>
          </div>
        </div>
      </div>
    </div>
    <div
      x-data="usePopper({
       offset: 12,
       placement: 'top',
       modifiers: [
          {name: 'preventOverflow', options: {padding: 10}}
       ]                     
    })"
      class="flex"
      @mouseleave="isShowPopper = false"
      @mouseenter="isShowPopper = true"
    >
      <div x-ref="popperRef" class="avatar size-8 hover:z-10">
        <img
          class="rounded-full ring-2 ring-white dark:ring-navy-700"
          src="images/avatar/avatar-12.jpg"
          alt="avatar"
        />
      </div>
      <div
        x-ref="popperRoot"
        class="popper-root"
        :class="isShowPopper && 'show'"
      >
        <div class="popper-box">
          <div
            class="w-72 rounded-md border border-slate-150 bg-white p-3 dark:border-navy-600 dark:bg-navy-700"
          >
            <div class="flex  space-x-3">
              <div class="avatar size-10">
                <img
                  class="rounded-full"
                  src="images/avatar/avatar-12.jpg"
                  alt="avatar"
                />
              </div>
              <div class="flex w-full items-start justify-between">
                <div>
                  <p
                    class="text-xs-plus font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
                  >
                    John D.
                  </p>
                  <p
                    class="text-xs text-primary line-clamp-1 dark:text-accent-light"
                  >
                    UI/UX Designer
                  </p>
                </div>
                <div
                  class="badge h-5  space-x-1.5 rounded-full bg-error/10 px-1.5 text-error dark:bg-error/15"
                >
                  <div class="size-1.5 rounded-full bg-current"></div>
                  <span>Busy</span>
                </div>
              </div>
            </div>
            <p class="pt-2 text-xs text-slate-400 dark:text-navy-300">
              Lorem ipsum dolor sit, amet consectetur adipisicing elit.
              Consequuntur.
            </p>
            <div class="flex justify-end  space-x-1 pt-4">
              <button
                class="btn size-7 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-4.5"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  stroke-width="1.5"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
                  />
                </svg>
              </button>
              <button
                class="btn size-7 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-4.5"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  stroke-width="1.5"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
                  />
                </svg>
              </button>
              <button
                class="btn size-7 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-4.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"
                  />
                </svg>
              </button>
            </div>
          </div>
          <div class="size-4" data-popper-arrow>
            <svg
              viewBox="0 0 16 9"
              xmlns="http://www.w3.org/2000/svg"
              class="absolute size-4"
              fill="currentColor"
            >
              <path
                class="text-slate-150 dark:text-navy-600"
                d="M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z"
              />
              <path
                class="text-white dark:text-navy-700"
                d="M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z"
              />
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>