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

## Avatar

- Elements
- Avatar

## Rounded Avatar

Code

The Avatar component creates a scalable, colorable element that can have text, icon or image within its shape. Check out code for detail of usage.

      <div class="avatar size-8">
        <img
          class="rounded-full"
          src="images/200x200.png"
          alt="avatar"
        />
      </div>

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

      <div class="avatar size-12">
        <img
          class="rounded-full"
          src="images/200x200.png"
          alt="avatar"
        />
      </div>

      <div class="avatar size-16">
        <img
          class="rounded-full"
          src="images/200x200.png"
          alt="avatar"
        />
      </div>

      <div class="avatar size-20">
        <img
          class="rounded-full"
          src="images/200x200.png"
          alt="avatar"
        />
      </div>

      <div class="avatar size-24">
        <img
          class="rounded-full"
          src="images/200x200.png"
          alt="avatar"
        />
      </div>

## Square Avatar

Code

Avatars can have a square shape. To do this, you should use the `rounded-lg` utility. Check out code for detail of usage.

      <div class="avatar size-8">
        <img
          class="rounded-lg"
          src="images/200x200.png"
          alt="avatar"
        />
      </div>

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

      <div class="avatar size-12">
        <img
          class="rounded-lg"
          src="images/200x200.png"
          alt="avatar"
        />
      </div>

      <div class="avatar size-16">
        <img
          class="rounded-lg"
          src="images/200x200.png"
          alt="avatar"
        />
      </div>

      <div class="avatar size-20">
        <img
          class="rounded-lg"
          src="images/200x200.png"
          alt="avatar"
        />
      </div>

      <div class="avatar size-24">
        <img
          class="rounded-lg"
          src="images/200x200.png"
          alt="avatar"
        />
      </div>

## Squircle Avatar

Code

Avatars can have a squircle shape. To do this, you should use the `mask is-squircle` classes. Check out code for detail of usage.

      <div class="avatar size-8">
        <img
          class="mask is-squircle"
          src="images/200x200.png"
          alt="avatar"
        />
      </div>

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

      <div class="avatar size-12">
        <img
          class="mask is-squircle"
          src="images/200x200.png"
          alt="avatar"
        />
      </div>

      <div class="avatar size-16">
        <img
          class="mask is-squircle"
          src="images/200x200.png"
          alt="avatar"
        />
      </div>

      <div class="avatar size-20">
        <img
          class="mask is-squircle"
          src="images/200x200.png"
          alt="avatar"
        />
      </div>

      <div class="avatar size-24">
        <img
          class="mask is-squircle"
          src="images/200x200.png"
          alt="avatar"
        />
      </div>

## Initial Avatar

Code

In the absence of a image, you can use the initial. Initials can be used in various variants. Check out code for detail of usage.

jd
jd
jd
jd
jd
jd
jd

      <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>

## Square Initial Avatar

Code

Initial avatars can have a square shape. To do this, you should use the `rounded-lg` utility. Check out code for detail of usage.

jd
jd
jd
jd
jd
jd
jd

      <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>

## Squircle Initial Avatar

Code

Initial avatars can have a squircle shape. To do this, you should use the `mask is-squircle` utility. Check out code for detail of usage.

jd
jd
jd
jd
jd
jd
jd

      <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>

## Soft Initial Avatar

Code

Initial avatars can have a soft colors. To do this, you should use some opacity. Check out code for detail of usage.

jd
jd
jd
jd
jd
jd

      <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>

## Bordered Initial Avatar

Code

Initial avatars can have a border. Check out code for detail of usage.

jd
jd
jd
jd
jd
jd

      <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>

## Square Soft Initial

Code

Initial avatars can have a soft colors and square shape. To do this, you should use some opacity and border-radius utility. Check out code for detail of usage.

jd
jd
jd
jd
jd
jd

      <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>

## Avatar With Dots

Code

Avatars can be a dot attached to it. It can be used to indicate the user status. Check out code for detail of usage.

      <div class="avatar size-8">
        <img
          class="rounded-full"
          src="images/200x200.png"
          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/200x200.png"
          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/200x200.png"
          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/200x200.png"
          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/200x200.png"
          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/200x200.png"
          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>

## Squircle Avatar Dots

Code

Avatars can be a dot attached to it. It can be used to indicate the user status. Check out code for detail of usage.

      <div class="avatar size-8">
        <img
          class="mask is-squircle"
          src="images/200x200.png"
          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/200x200.png"
          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/200x200.png"
          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/200x200.png"
          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/200x200.png"
          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/200x200.png"
          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>

## Initial With Dots

Code

Initial avatars can be a dot attached to it, too. It can be used to indicate the user status. Check out code for detail of usage.

jd
jd
jd
jd
jd
jd

      <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>

## Avatar Dot Colors

Code

Avatar dots can be used in various colors. It can be used to indicate the user status. Check out code for detail of usage.

      <div class="avatar size-12">
        <img
          class="rounded-full"
          src="images/200x200.png"
          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/200x200.png"
          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/200x200.png"
          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/200x200.png"
          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/200x200.png"
          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/200x200.png"
          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/200x200.png"
          alt="avatar"
        />
        <div
          class="absolute right-0 size-3.5 rounded-full border-2 border-white bg-error dark:border-navy-700"
        ></div>
      </div>

## Avatar Dot Ping

Code

Avatar dots can have the ping animation. This can be used to indicate an important message. Check out code for detail of usage.

jd
jd
jd
jd
jd
jd

      <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>

## Avatar Dot Position

Code

Avatar dot position can be up, down, left and right. Check out code for detail of usage.

jd
jd
jd
jd

      <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>

## Avatar Group

Code

The Avatar group renders its children as a stack. Check out code for detail of usage.

jd

      <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/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 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>

## Square Avatar Group

Code

The Avatar group renders its children as a stack. Check out code for detail of usage.

jd

      <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/200x200.png"
            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/200x200.png"
            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/200x200.png"
            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/200x200.png"
            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/200x200.png"
            alt="avatar"
          />
        </div>
      </div>

## Gradient Border

Code

Border avatars can be gradient colors. Check out code for detail of usage.

      <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/200x200.png"
            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/200x200.png"
            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/200x200.png"
            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/200x200.png"
            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/200x200.png"
            alt="avatar"
          />
        </div>
      </div>

## Avatar Skeleton

Code

It is also possible to use a skeleton to preview photos. Check out code for detail of usage.

      <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 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 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 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 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 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 ring-white dark:bg-navy-500 dark:ring-navy-700"
          >
            <i class="fa fa-user"></i>
          </div>
        </div>
      </div>