<div class="avatar size-8">
    <img
      class="rounded-full"
      src="images/avatar/avatar-16.jpg"
      alt="avatar"
    />
  </div>

  <div class="avatar size-10">
    <img
      class="rounded-full"
      src="images/avatar/avatar-10.jpg"
      alt="avatar"
    />
  </div>

  <div class="avatar size-12">
    <img
      class="rounded-full"
      src="images/avatar/avatar-20.jpg"
      alt="avatar"
    />
  </div>

  <div class="avatar size-16">
    <img
      class="rounded-full"
      src="images/avatar/avatar-19.jpg"
      alt="avatar"
    />
  </div>

  <div class="avatar size-20">
    <img
      class="rounded-full"
      src="images/avatar/avatar-8.jpg"
      alt="avatar"
    />
  </div>

  <div class="avatar size-24">
    <img
      class="rounded-full"
      src="images/avatar/avatar-5.jpg"
      alt="avatar"
    />
  </div>
                
              

                
  <div class="avatar size-8">
    <img
      class="rounded-lg"
      src="images/avatar/avatar-16.jpg"
      alt="avatar"
    />
  </div>

  <div class="avatar size-10">
    <img
      class="rounded-lg"
      src="images/avatar/avatar-10.jpg"
      alt="avatar"
    />
  </div>

  <div class="avatar size-12">
    <img
      class="rounded-lg"
      src="images/avatar/avatar-20.jpg"
      alt="avatar"
    />
  </div>

  <div class="avatar size-16">
    <img
      class="rounded-lg"
      src="images/avatar/avatar-19.jpg"
      alt="avatar"
    />
  </div>

  <div class="avatar size-20">
    <img
      class="rounded-lg"
      src="images/avatar/avatar-8.jpg"
      alt="avatar"
    />
  </div>

  <div class="avatar size-24">
    <img
      class="rounded-lg"
      src="images/avatar/avatar-5.jpg"
      alt="avatar"
    />
  </div>
                
              

                
  <div class="avatar size-8">
    <img
      class="mask is-squircle"
      src="images/avatar/avatar-16.jpg"
      alt="avatar"
    />
  </div>

  <div class="avatar size-10">
    <img
      class="mask is-squircle"
      src="images/avatar/avatar-10.jpg"
      alt="avatar"
    />
  </div>

  <div class="avatar size-12">
    <img
      class="mask is-squircle"
      src="images/avatar/avatar-20.jpg"
      alt="avatar"
    />
  </div>

  <div class="avatar size-16">
    <img
      class="mask is-squircle"
      src="images/avatar/avatar-19.jpg"
      alt="avatar"
    />
  </div>

  <div class="avatar size-20">
    <img
      class="mask is-squircle"
      src="images/avatar/avatar-8.jpg"
      alt="avatar"
    />
  </div>

  <div class="avatar size-24">
    <img
      class="mask is-squircle"
      src="images/avatar/avatar-5.jpg"
      alt="avatar"
    />
  </div>  
                
              

                
  <div class="avatar size-12">
    <div
      class="is-initial rounded-full bg-slate-200 text-base uppercase text-slate-600 dark:bg-navy-500 dark:text-navy-100"
    >
      jd
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial rounded-full bg-primary text-base uppercase text-white dark:bg-accent"
    >
      jd
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial rounded-full bg-secondary text-base uppercase text-white"
    >
      jd
    </div>
  </div>

  <div class="avatar size-12">
    <div class="is-initial rounded-full bg-info text-base uppercase text-white">
      jd
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial rounded-full bg-success text-base uppercase text-white"
    >
      jd
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial rounded-full bg-warning text-base uppercase text-white"
    >
      jd
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial rounded-full bg-error text-base uppercase text-white"
    >
      jd
    </div>
  </div>

                
              

                
  <div class="avatar size-12">
    <div
      class="is-initial rounded-lg bg-slate-200 text-base uppercase text-slate-600 dark:bg-navy-500 dark:text-navy-100"
    >
      jd
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial rounded-lg bg-primary text-base uppercase text-white dark:bg-accent"
    >
      jd
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial rounded-lg bg-secondary text-base uppercase text-white"
    >
      jd
    </div>
  </div>

  <div class="avatar size-12">
    <div class="is-initial rounded-lg bg-info text-base uppercase text-white">
      jd
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial rounded-lg bg-success text-base uppercase text-white"
    >
      jd
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial rounded-lg bg-warning text-base uppercase text-white"
    >
      jd
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial rounded-lg bg-error text-base uppercase text-white"
    >
      jd
    </div>
  </div>  
                
              

                
  <div class="avatar size-12">
    <div
      class="is-initial mask is-squircle bg-slate-200 text-base uppercase text-slate-600 dark:bg-navy-500 dark:text-navy-100"
    >
      jd
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial mask is-squircle bg-primary text-base uppercase text-white dark:bg-accent"
    >
      jd
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial mask is-squircle bg-secondary text-base uppercase text-white"
    >
      jd
    </div>
  </div>

  <div class="avatar size-12">
    <div class="is-initial mask is-squircle bg-info text-base uppercase text-white">
      jd
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial mask is-squircle bg-success text-base uppercase text-white"
    >
      jd
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial mask is-squircle bg-warning text-base uppercase text-white"
    >
      jd
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial mask is-squircle bg-error text-base uppercase text-white"
    >
      jd
    </div>
  </div>  
                
              

                
  <div class="avatar size-12">
    <div
      class="is-initial rounded-full bg-primary/10 text-base uppercase text-primary dark:bg-accent-light/10 dark:text-accent-light"
    >
      jd
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial rounded-full bg-secondary/10 text-base uppercase text-secondary dark:bg-secondary-light/10 dark:text-secondary-light"
    >
      jd
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial rounded-full bg-info/10 text-base uppercase text-info"
    >
      jd
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial rounded-full bg-success/10 text-base uppercase text-success"
    >
      jd
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial rounded-full bg-warning/10 text-base uppercase text-warning"
    >
      jd
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial rounded-full bg-error/10 text-base uppercase text-error"
    >
      jd
    </div>
  </div>
                
              

                
  <div class="avatar size-12">
    <div
      class="is-initial rounded-full border border-primary/30 bg-primary/10 text-base uppercase text-primary dark:border-accent-light/30 dark:bg-accent-light/10 dark:text-accent-light"
    >
      jd
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial rounded-full border border-secondary/30 bg-secondary/10 text-base uppercase text-secondary dark:border-secondary-light/30 dark:bg-secondary-light/10 dark:text-secondary-light"
    >
      jd
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial rounded-full border border-info/30 bg-info/10 text-base uppercase text-info"
    >
      jd
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial rounded-full border border-success/30 bg-success/10 text-base uppercase text-success"
    >
      jd
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial rounded-full border border-warning/30 bg-warning/10 text-base uppercase text-warning"
    >
      jd
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial rounded-full border border-error/30 bg-error/10 text-base uppercase text-error"
    >
      jd
    </div>
  </div>
                
              

                
  <div class="avatar size-12">
    <div
      class="is-initial rounded-lg bg-primary/10 text-base uppercase text-primary dark:bg-accent-light/10 dark:text-accent-light"
    >
      jd
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial rounded-lg bg-secondary/10 text-base uppercase text-secondary dark:bg-secondary-light/10 dark:text-secondary-light"
    >
      jd
    </div>
  </div>

  <div class="avatar size-12">
    <div class="is-initial rounded-lg bg-info/10 text-base uppercase text-info">
      jd
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial rounded-lg bg-success/10 text-base uppercase text-success"
    >
      jd
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial rounded-lg bg-warning/10 text-base uppercase text-warning"
    >
      jd
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial rounded-lg bg-error/10 text-base uppercase text-error"
    >
      jd
    </div>
  </div>    
                
              

                
  <div class="avatar size-8">
    <img
      class="rounded-full"
      src="images/avatar/avatar-16.jpg"
      alt="avatar"
    />
    <div
      class="absolute right-0 size-2.5 rounded-full border border-white bg-primary dark:border-navy-700 dark:bg-accent"
    ></div>
  </div>

  <div class="avatar size-10">
    <img
      class="rounded-full"
      src="images/avatar/avatar-10.jpg"
      alt="avatar"
    />
    <div
      class="absolute right-0 size-3 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
    ></div>
  </div>

  <div class="avatar size-12">
    <img
      class="rounded-full"
      src="images/avatar/avatar-20.jpg"
      alt="avatar"
    />
    <div
      class="absolute right-0 size-3.5 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
    ></div>
  </div>

  <div class="avatar size-16">
    <img
      class="rounded-full"
      src="images/avatar/avatar-19.jpg"
      alt="avatar"
    />
    <div
      class="absolute right-0 m-0.5 size-3.5 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
    ></div>
  </div>

  <div class="avatar size-20">
    <img
      class="rounded-full"
      src="images/avatar/avatar-8.jpg"
      alt="avatar"
    />
    <div
      class="absolute right-0 m-1 size-4 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
    ></div>
  </div>

  <div class="avatar size-24">
    <img
      class="rounded-full"
      src="images/avatar/avatar-5.jpg"
      alt="avatar"
    />
    <div
      class="absolute right-0 m-1.5 size-4 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
    ></div>
  </div>
                
              

                
  <div class="avatar size-8">
    <img
      class="mask is-squircle"
      src="images/avatar/avatar-16.jpg"
      alt="avatar"
    />
    <div
      class="absolute right-0 -m-px size-2.5 rounded-full border border-white bg-primary dark:border-navy-700 dark:bg-accent"
    ></div>
  </div>

  <div class="avatar size-10">
    <img
      class="mask is-squircle"
      src="images/avatar/avatar-10.jpg"
      alt="avatar"
    />
    <div
      class="absolute right-0 -m-0.5 size-3 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
    ></div>
  </div>

  <div class="avatar size-12">
    <img
      class="mask is-squircle"
      src="images/avatar/avatar-20.jpg"
      alt="avatar"
    />
    <div
      class="absolute right-0 -m-0.5 size-3.5 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
    ></div>
  </div>

  <div class="avatar size-16">
    <img
      class="mask is-squircle"
      src="images/avatar/avatar-19.jpg"
      alt="avatar"
    />
    <div
      class="absolute right-0 -m-px size-3.5 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
    ></div>
  </div>

  <div class="avatar size-20">
    <img
      class="mask is-squircle"
      src="images/avatar/avatar-8.jpg"
      alt="avatar"
    />
    <div
      class="absolute right-0 size-4 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
    ></div>
  </div>

  <div class="avatar size-24">
    <img
      class="mask is-squircle"
      src="images/avatar/avatar-5.jpg"
      alt="avatar"
    />
    <div
      class="absolute right-0 size-4 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
    ></div>
  </div>  
                
              

                
  <div class="avatar size-8">
    <div
      class="is-initial rounded-full bg-slate-200 text-xs-plus uppercase text-slate-600 dark:bg-navy-500 dark:text-navy-100"
    >
      jd
    </div>
    <div
      class="absolute right-0 size-2.5 rounded-full border border-white bg-primary dark:border-navy-700 dark:bg-accent"
    ></div>
  </div>

  <div class="avatar size-10">
    <div
      class="is-initial rounded-full bg-slate-200 uppercase text-slate-600 dark:bg-navy-500 dark:text-navy-100"
    >
      jd
    </div>
    <div
      class="absolute right-0 size-3 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
    ></div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial rounded-full bg-slate-200 text-base uppercase text-slate-600 dark:bg-navy-500 dark:text-navy-100"
    >
      jd
    </div>
    <div
      class="absolute right-0 size-3.5 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
    ></div>
  </div>

  <div class="avatar size-16">
    <div
      class="is-initial rounded-full bg-slate-200 text-lg uppercase text-slate-600 dark:bg-navy-500 dark:text-navy-100"
    >
      jd
    </div>
    <div
      class="absolute right-0 m-0.5 size-3.5 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
    ></div>
  </div>

  <div class="avatar size-20">
    <div
      class="is-initial rounded-full bg-slate-200 text-xl uppercase text-slate-600 dark:bg-navy-500 dark:text-navy-100"
    >
      jd
    </div>
    <div
      class="absolute right-0 m-1 size-4 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
    ></div>
  </div>

  <div class="avatar size-24">
    <div
      class="is-initial rounded-full bg-slate-200 text-2xl uppercase text-slate-600 dark:bg-navy-500 dark:text-navy-100"
    >
      jd
    </div>
    <div
      class="absolute right-0 m-1.5 size-4 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
    ></div>
  </div>    
                
              

                
  <div class="avatar size-12">
    <img
      class="rounded-full"
      src="images/avatar/avatar-16.jpg"
      alt="avatar"
    />
    <div
      class="absolute right-0 size-3.5 rounded-full border-2 border-white bg-slate-300 dark:border-navy-700"
    ></div>
  </div>

  <div class="avatar size-12">
    <img
      class="rounded-full"
      src="images/avatar/avatar-10.jpg"
      alt="avatar"
    />
    <div
      class="absolute right-0 size-3.5 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
    ></div>
  </div>

  <div class="avatar size-12">
    <img
      class="rounded-full"
      src="images/avatar/avatar-20.jpg"
      alt="avatar"
    />
    <div
      class="absolute right-0 size-3.5 rounded-full border-2 border-white bg-secondary dark:border-navy-700 dark:bg-secondary-light"
    ></div>
  </div>

  <div class="avatar size-12">
    <img
      class="rounded-full"
      src="images/avatar/avatar-19.jpg"
      alt="avatar"
    />
    <div
      class="absolute right-0 size-3.5 rounded-full border-2 border-white bg-info dark:border-navy-700"
    ></div>
  </div>

  <div class="avatar size-12">
    <img
      class="rounded-full"
      src="images/avatar/avatar-8.jpg"
      alt="avatar"
    />
    <div
      class="absolute right-0 size-3.5 rounded-full border-2 border-white bg-success dark:border-navy-700"
    ></div>
  </div>

  <div class="avatar size-12">
    <img
      class="rounded-full"
      src="images/avatar/avatar-5.jpg"
      alt="avatar"
    />
    <div
      class="absolute right-0 size-3.5 rounded-full border-2 border-white bg-warning dark:border-navy-700"
    ></div>
  </div>

  <div class="avatar size-12">
    <img
      class="rounded-full"
      src="images/avatar/avatar-12.jpg"
      alt="avatar"
    />
    <div
      class="absolute right-0 size-3.5 rounded-full border-2 border-white bg-error dark:border-navy-700"
    ></div>
  </div>                
              

                
  <div class="avatar size-12">
    <div
      class="is-initial rounded-full bg-slate-200 text-base uppercase text-slate-600 dark:bg-navy-500 dark:text-navy-100"
    >
      jd
    </div>
    <div
      class="absolute right-0 size-3.5 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
    >
      <span
        class="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-80 dark:bg-accent"
      ></span>
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial rounded-full bg-slate-200 text-base uppercase text-slate-600 dark:bg-navy-500 dark:text-navy-100"
    >
      jd
    </div>
    <div
      class="absolute right-0 size-3.5 rounded-full border-2 border-white bg-secondary dark:border-navy-700 dark:bg-secondary-light"
    >
      <span
        class="absolute inline-flex h-full w-full animate-ping rounded-full bg-secondary opacity-80 dark:bg-secondary-light"
      ></span>
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial rounded-full bg-slate-200 text-base uppercase text-slate-600 dark:bg-navy-500 dark:text-navy-100"
    >
      jd
    </div>
    <div
      class="absolute right-0 size-3.5 rounded-full border-2 border-white bg-info dark:border-navy-700"
    >
      <span
        class="absolute inline-flex h-full w-full animate-ping rounded-full bg-info opacity-80"
      ></span>
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial rounded-full bg-slate-200 text-base uppercase text-slate-600 dark:bg-navy-500 dark:text-navy-100"
    >
      jd
    </div>
    <div
      class="absolute right-0 size-3.5 rounded-full border-2 border-white bg-success dark:border-navy-700"
    >
      <span
        class="absolute inline-flex h-full w-full animate-ping rounded-full bg-success opacity-80"
      ></span>
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial rounded-full bg-slate-200 text-base uppercase text-slate-600 dark:bg-navy-500 dark:text-navy-100"
    >
      jd
    </div>
    <div
      class="absolute right-0 size-3.5 rounded-full border-2 border-white bg-warning dark:border-navy-700"
    >
      <span
        class="absolute inline-flex h-full w-full animate-ping rounded-full bg-warning opacity-80"
      ></span>
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial rounded-full bg-slate-200 text-base uppercase text-slate-600 dark:bg-navy-500 dark:text-navy-100"
    >
      jd
    </div>
    <div
      class="absolute right-0 size-3.5 rounded-full border-2 border-white bg-error dark:border-navy-700"
    >
      <span
        class="absolute inline-flex h-full w-full animate-ping rounded-full bg-error opacity-80"
      ></span>
    </div>
  </div>
                
              

                
  <div class="avatar size-12">
    <div
      class="is-initial rounded-full bg-slate-200 text-base uppercase text-slate-600 dark:bg-navy-500 dark:text-navy-100"
    >
      jd
    </div>
    <div
      class="absolute right-0 size-3.5 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
    >
      <span
        class="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-80 dark:bg-accent"
      ></span>
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial rounded-full bg-slate-200 text-base uppercase text-slate-600 dark:bg-navy-500 dark:text-navy-100"
    >
      jd
    </div>
    <div
      class="absolute left-0 size-3.5 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
    >
      <span
        class="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-80 dark:bg-accent"
      ></span>
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial rounded-full bg-slate-200 text-base uppercase text-slate-600 dark:bg-navy-500 dark:text-navy-100"
    >
      jd
    </div>
    <div
      class="absolute bottom-0 right-0 size-3.5 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
    >
      <span
        class="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-80 dark:bg-accent"
      ></span>
    </div>
  </div>

  <div class="avatar size-12">
    <div
      class="is-initial rounded-full bg-slate-200 text-base uppercase text-slate-600 dark:bg-navy-500 dark:text-navy-100"
    >
      jd
    </div>
    <div
      class="absolute bottom-0 left-0 size-3.5 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
    >
      <span
        class="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-80 dark:bg-accent"
      ></span>
    </div>
  </div>                
              

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

                  
  <div class="flex flex-wrap -space-x-2">
    <div class="avatar size-8 hover:z-10">
      <img
        class="rounded-xl 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-xl 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-xl 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-xl ring-2 ring-white dark:ring-navy-700"
        src="images/avatar/avatar-19.jpg"
        alt="avatar"
      />
    </div>

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

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

              

                
  <div
    class="flex size-16 rounded-full bg-gradient-to-r from-sky-400 to-blue-600 p-0.5"
  >
    <div
      class="avatar h-full w-full rounded-full bg-white p-[3px] dark:bg-navy-700"
    >
      <img
        class="rounded-full"
        src="images/avatar/avatar-16.jpg"
        alt="avatar"
      />
    </div>
  </div>

  <div
    class="flex size-16 rounded-full bg-gradient-to-r from-amber-400 to-orange-600 p-0.5"
  >
    <div
      class="avatar h-full w-full rounded-full bg-white p-[3px] dark:bg-navy-700"
    >
      <img
        class="rounded-full"
        src="images/avatar/avatar-10.jpg"
        alt="avatar"
      />
    </div>
  </div>

  <div
    class="flex size-16 rounded-full bg-gradient-to-r from-pink-500 to-rose-500 p-0.5"
  >
    <div
      class="avatar h-full w-full rounded-full bg-white p-[3px] dark:bg-navy-700"
    >
      <img
        class="rounded-full"
        src="images/avatar/avatar-20.jpg"
        alt="avatar"
      />
    </div>
  </div>

  <div
    class="flex size-16 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5"
  >
    <div
      class="avatar h-full w-full rounded-full bg-white p-[3px] dark:bg-navy-700"
    >
      <img
        class="rounded-full"
        src="images/avatar/avatar-19.jpg"
        alt="avatar"
      />
      <div
        class="absolute right-0 size-3.5 rounded-full border-2 border-white bg-error dark:border-navy-700"
      ></div>
    </div>
  </div>

  <div
    class="flex size-16 rounded-full bg-gradient-to-r from-green-400 to-fuchsia-400 p-0.5"
  >
    <div
      class="avatar h-full w-full rounded-full bg-white p-[3px] dark:bg-navy-700"
    >
      <img
        class="rounded-full"
        src="images/avatar/avatar-8.jpg"
        alt="avatar"
      />
    </div>
  </div>
                
               

                
  <div class="flex animate-pulse flex-wrap -space-x-2">
    <div class="avatar size-8">
      <div
        class="is-initial rounded-full bg-slate-200 text-xs-plus uppercase text-white ring-2 ring-white dark:bg-navy-500 dark:ring-navy-700"
      >
        <i class="fa fa-user"></i>
      </div>
    </div>
    <div class="avatar size-8">
      <div
        class="is-initial rounded-full bg-slate-200 text-xs-plus text-white ring-2 ring-white dark:bg-navy-500 dark:ring-navy-700"
      >
        <i class="fa fa-user"></i>
      </div>
    </div>
    <div class="avatar size-8">
      <div
        class="is-initial rounded-full bg-slate-200 text-xs-plus text-white ring-2 ring-white dark:bg-navy-500 dark:ring-navy-700"
      >
        <i class="fa fa-user"></i>
      </div>
    </div>
    <div class="avatar size-8">
      <div
        class="is-initial rounded-full bg-slate-200 text-xs-plus text-white ring-2 ring-white dark:bg-navy-500 dark:ring-navy-700"
      >
        <i class="fa fa-user"></i>
      </div>
    </div>
    <div class="avatar size-8">
      <div
        class="is-initial rounded-full bg-slate-200 text-xs-plus text-white ring-2 ring-white dark:bg-navy-500 dark:ring-navy-700"
      >
        <i class="fa fa-user"></i>
      </div>
    </div>
    <div class="avatar size-8">
      <div
        class="is-initial rounded-full bg-slate-200 text-xs-plus text-white ring-2 ring-white dark:bg-navy-500 dark:ring-navy-700"
      >
        <i class="fa fa-user"></i>
      </div>
    </div>
  </div>