Kanban

Analytics

Chat

Files

Crypto

Banking

Todo

Orders

Recent

View All
Chat App
File Manager App
Email App
Kanban Board
Todo App
Crypto Dashboard
Banking Dashboard
Analytics Dashboard
Influencer Dashboard

25 May, 2022

Projects

Activity

## Banking cards

$2,139.22

**** **** **** 8945

$2,139.22

**** **** **** 8945

$2,139.22

**** **** **** 8945

## Pinned Apps

Kanban

Analytics

Chat

Files

Banking

11.3 hr

Working Hours

71%

13 /22

Completed tasks

49%

## Stock Market

## BTC

Bitcoin

60.33$

+3.3%

## SOL

Solana

20.56$

+4.11%

## Latest News

What is Tailwind CSS?

John D.

2 min read

Tailwind CSS Card Example

Travis F.

5 min read

10 Tips for Making a Good Camera Even Better

Alfredo E .

4 min read

## Settings

Dark Mode Monochrome Mode

35GB of 1TB

Upgrade

14

Pending

36

Completed

143

In Progress

279

Total

LMS App Design

Updated at 7 Sep

25%

jd

Store Dashboard

Updated at 11 Sep

49%

dv

Chat Mobile App

Updated at 19 Sep

13%

gt

NFT Marketplace App

Updated at 5 Sep

78%

jd

Today

6hr 22m

1. User Photo Changed

   12 minute ago

   John Doe changed his avatar photo

2. Images Added

   1 hour ago

   Mores Clarke added new image gallery

   Category: #Tag #Category

3. Design Completed

   3 hours ago

   Robert Nolan completed the design of the CRM application

   File_final.fig
   UI/UX CRM Dashboard

4. ER Diagram

   a day ago

   Team completed the ER diagram app

   Members:

   jd

5. Weekly Report

   a day ago

   The weekly report was uploaded

## Popover

- Components
- Popover

## Basic Popover

Code

The Popover component is similar to tooltips. The difference is that the popover can contain much more content. Check out code for detail of usage.

### UI/UX Design

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Tag 1 Tag 2 Tag 3

Lorem ipsum dolor sit amet, elit.

      <div
        x-data="usePopper({
           offset: 12,
           placement: 'right-start',
           modifiers: [
              {name: 'flip', options: {fallbackPlacements: ['bottom','top']}},
              {name: 'preventOverflow', options: {padding: 10}}
           ]
        })"
        @click.outside="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>

## Advanced Popover

Code

The Popover component is similar to tooltips. The difference is that the popover can contain much more content. Check out code for detail of usage.

### Group Lesson

Social Media Marketing

Lorem ipsum dolor sit amet consectetur adipisicing elit.

jd

25 May, 2022

      <div
        x-data="usePopper({
           offset: 12,
           placement: 'right-start',
           modifiers: [
              {name: 'flip', options: {fallbackPlacements: ['bottom','top']}},
              {name: 'preventOverflow', options: {padding: 10}}
           ]
        })"
        @click.outside="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/200x200.png"
                    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/200x200.png"
                    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/200x200.png"
                    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>

## Form Popover

Code

The Popover component is similar to tooltips. The difference is that the popover can contain much more content. Check out code for detail of usage.

### Select Columns

Lorem ipsum dolor sit amet, consectetur.

ID Name Email

Address

Created at Updated at

      <div
        x-data="usePopper({
           offset: 12,
           placement: 'auto',
           modifiers: [
              {name: 'preventOverflow', options: {padding: 10}}
           ]
        })"
        @click.outside="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>

## Profile Popover

Code

The Popover component is similar to tooltips. The difference is that the popover can contain much more content. Check out code for detail of usage.

John Doe

@johndoeaccount

Sally Ramos

@sallyramos

Katrina West

@katrinawest

      <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/200x200.png"
              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/200x200.png"
                    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/200x200.png"
              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/200x200.png"
                    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/200x200.png"
              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/200x200.png"
                    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>

## Profile Popover

Code

The Popover component is similar to tooltips. The difference is that the popover can contain much more content. Check out code for detail of usage.

Konnor G.

Web Developer

Free

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur.

John D.

UI/UX Designer

Busy

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur.

Simon T.

Fronend Developer

At work

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur.

      <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/200x200.png"
              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/200x200.png"
                      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/200x200.png"
              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/200x200.png"
                      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/200x200.png"
              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/200x200.png"
                      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"
                      >
                        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>