<div id="popover-wrapper1" class="flex">
    <button
      class="btn popper-ref 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"
    >
      Basic Popover
    </button>
    <div class="popper-root">
      <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>

  <!-- Javascript -->

  <script>
    const config = {
      placement: "right-start",
      modifiers: [
        { name: "flip", options: { fallbackPlacements: ["bottom", "top"] } },
        { name: "preventOverflow", options: { padding: 10 } },
        {
          name: "offset",
          options: {
            offset: [0, 12],
          },
        },
      ],
    };

    // Basic popover
    new Popper("#popover-wrapper1", ".popper-ref", ".popper-root", config);
  </script>
                
              

                
  <div id="popover-wrapper2" class="flex">
    <button
      class="popper-ref 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"
    >
      Lessons
    </button>
    <div class="popper-root">
      <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 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+ uppercase text-white ring ring-white dark:ring-navy-700"
              >
                jd
              </div>
            </div>

            <div class="avatar size-8 hover:z-10">
              <img
                class="rounded-full ring 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 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"
                />
              </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"
                />
              </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>

  <!-- Javascript -->

  <script>
    const config = {
      placement: "right-start",
      modifiers: [
        { name: "flip", options: { fallbackPlacements: ["bottom", "top"] } },
        { name: "preventOverflow", options: { padding: 10 } },
        {
          name: "offset",
          options: {
            offset: [0, 12],
          },
        },
      ],
    };

    // Basic popover
    new Popper("#popover-wrapper2", ".popper-ref", ".popper-root", config);
  </script>
                
              

                
  <div id="popover-wrapper3" class="flex">
    <button
      class="popper-ref 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"
    >
      Choose Columns
    </button>
    <div class="popper-root">
      <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+">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 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"
              />
              <span>ID</span>
            </label>
            <label class="inline-flex items-center space-x-2">
              <input
                checked
                class="form-checkbox is-basic size-5 rounded 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"
              />
              <span>Name</span>
            </label>
            <label class="inline-flex items-center space-x-2">
              <input
                checked
                class="form-checkbox is-basic size-5 rounded 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"
              />
              <span>Email</span>
            </label>
            <label class="inline-flex items-center space-x-2">
              <input
                class="form-checkbox is-basic size-5 rounded 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 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"
              />
              <span>Created at</span>
            </label>
            <label class="inline-flex items-center space-x-2">
              <input
                class="form-checkbox is-basic size-5 rounded 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"
              />
              <span>Updated at</span>
            </label>
          </div>
          <button
            class="btn mt-4 h-8 w-full rounded-md bg-primary px-4 text-xs+ 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>

  <!-- Javascript -->

  <script>
    const config = {
      placement: "right-start",
      modifiers: [
        { name: "flip", options: { fallbackPlacements: ["bottom", "top"] } },
        { name: "preventOverflow", options: { padding: 10 } },
        {
          name: "offset",
          options: {
            offset: [0, 12],
          },
        },
      ],
    };

    // Basic popover
    new Popper("#popover-wrapper3", ".popper-ref", ".popper-root", config);
  </script>
                
              

                
  <div class="flex flex-wrap justify-center -space-x-2 sm:justify-start">
    <div id="popover-wrapper4" class="flex">
      <div class="popper-ref avatar size-8 hover:z-10">
        <img
          class="rounded-full ring ring-white dark:ring-navy-700"
          src="images/avatar/avatar-19.jpg"
          alt="avatar"
        />
      </div>
      <div class="popper-root">
        <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+ 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 id="popover-wrapper5" class="flex">
      <div class="popper-ref avatar size-8 hover:z-10">
        <img
          class="rounded-full ring ring-white dark:ring-navy-700"
          src="images/avatar/avatar-11.jpg"
          alt="avatar"
        />
      </div>
      <div class="popper-root">
        <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+ 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 id="popover-wrapper6" class="flex">
      <div class="popper-ref avatar size-8 hover:z-10">
        <img
          class="rounded-full ring ring-white dark:ring-navy-700"
          src="images/avatar/avatar-8.jpg"
          alt="avatar"
        />
      </div>
      <div class="popper-root">
        <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+ 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>

  <!-- Javascript -->

  <script>
    const config = {
      placement: "top",
      modifiers: [
        { name: "preventOverflow", options: { padding: 10 } },
        {
          name: "offset",
          options: {
            offset: [0, 12],
          },
        },
      ],
    };

    // Profile Popover 1
    new Popper(
      "#popover-wrapper4",
      ".popper-ref",
      ".popper-root",
      config,
      "hover"
    );

    new Popper(
      "#popover-wrapper5",
      ".popper-ref",
      ".popper-root",
      config,
      "hover"
    );

    new Popper(
      "#popover-wrapper6",
      ".popper-ref",
      ".popper-root",
      config,
      "hover"
    );
  </script>
                
              

                
  <div class="flex flex-wrap justify-center -space-x-2 sm:justify-start">
    <div id="popover-wrapper7" class="flex">
      <div class="popper-ref avatar size-8 hover:z-10">
        <img
          class="rounded-full ring ring-white dark:ring-navy-700"
          src="images/avatar/avatar-19.jpg"
          alt="avatar"
        />
      </div>
      <div class="popper-root">
        <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+ 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 id="popover-wrapper8" class="flex">
      <div class="popper-ref avatar size-8 hover:z-10">
        <img
          class="rounded-full ring ring-white dark:ring-navy-700"
          src="images/avatar/avatar-12.jpg"
          alt="avatar"
        />
      </div>
      <div class="popper-root">
        <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+ 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 id="popover-wrapper9" class="flex">
      <div class="popper-ref avatar size-8 hover:z-10">
        <img
          class="rounded-full ring ring-white dark:ring-navy-700"
          src="images/avatar/avatar-20.jpg"
          alt="avatar"
        />
      </div>
      <div class="popper-root">
        <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-20.jpg"
                  alt="avatar"
                />
              </div>
              <div class="flex w-full items-start justify-between">
                <div>
                  <p
                    class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
                  >
                    Simon T.
                  </p>
                  <p
                    class="text-xs text-primary line-clamp-1 dark:text-accent-light"
                  >
                    Fronend Developer
                  </p>
                </div>
                <div
                  class="badge h-5 space-x-1.5 rounded-full bg-warning/10 px-1.5 text-warning dark:bg-warning/15"
                >
                  <div class="size-1.5 rounded-full bg-current"></div>
                  <span>At work</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>

  <!-- Javascript -->

  <script>
    const config = {
      placement: "top",
      modifiers: [
        { name: "preventOverflow", options: { padding: 10 } },
        {
          name: "offset",
          options: {
            offset: [0, 12],
          },
        },
      ],
    };

    new Popper(
      "#popover-wrapper7",
      ".popper-ref",
      ".popper-root",
      config,
      "hover"
    );

    new Popper(
      "#popover-wrapper8",
      ".popper-ref",
      ".popper-root",
      config,
      "hover"
    );

    new Popper(
      "#popover-wrapper9",
      ".popper-ref",
      ".popper-root",
      config,
      "hover"
    );
  </script>