Rounded Avatar
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 h-8 w-8">
<img
class="rounded-full"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-10 w-10">
<img
class="rounded-full"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-12 w-12">
<img
class="rounded-full"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-16 w-16">
<img
class="rounded-full"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-20 w-20">
<img
class="rounded-full"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-24 w-24">
<img
class="rounded-full"
src="images/200x200.png"
alt="avatar"
/>
</div>
Square Avatar
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 h-8 w-8">
<img
class="rounded-lg"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-10 w-10">
<img
class="rounded-lg"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-12 w-12">
<img
class="rounded-lg"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-16 w-16">
<img
class="rounded-lg"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-20 w-20">
<img
class="rounded-lg"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-24 w-24">
<img
class="rounded-lg"
src="images/200x200.png"
alt="avatar"
/>
</div>
Squircle Avatar
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 h-8 w-8">
<img
class="mask is-squircle"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-10 w-10">
<img
class="mask is-squircle"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-12 w-12">
<img
class="mask is-squircle"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-16 w-16">
<img
class="mask is-squircle"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-20 w-20">
<img
class="mask is-squircle"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-24 w-24">
<img
class="mask is-squircle"
src="images/200x200.png"
alt="avatar"
/>
</div>
Initial Avatar
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 h-12 w-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 h-12 w-12">
<div
class="is-initial rounded-full bg-primary text-base uppercase text-white dark:bg-accent"
>
jd
</div>
</div>
<div class="avatar h-12 w-12">
<div
class="is-initial rounded-full bg-secondary text-base uppercase text-white"
>
jd
</div>
</div>
<div class="avatar h-12 w-12">
<div class="is-initial rounded-full bg-info text-base uppercase text-white">
jd
</div>
</div>
<div class="avatar h-12 w-12">
<div
class="is-initial rounded-full bg-success text-base uppercase text-white"
>
jd
</div>
</div>
<div class="avatar h-12 w-12">
<div
class="is-initial rounded-full bg-warning text-base uppercase text-white"
>
jd
</div>
</div>
<div class="avatar h-12 w-12">
<div
class="is-initial rounded-full bg-error text-base uppercase text-white"
>
jd
</div>
</div>
Square Initial Avatar
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 h-12 w-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 h-12 w-12">
<div
class="is-initial rounded-lg bg-primary text-base uppercase text-white dark:bg-accent"
>
jd
</div>
</div>
<div class="avatar h-12 w-12">
<div
class="is-initial rounded-lg bg-secondary text-base uppercase text-white"
>
jd
</div>
</div>
<div class="avatar h-12 w-12">
<div class="is-initial rounded-lg bg-info text-base uppercase text-white">
jd
</div>
</div>
<div class="avatar h-12 w-12">
<div
class="is-initial rounded-lg bg-success text-base uppercase text-white"
>
jd
</div>
</div>
<div class="avatar h-12 w-12">
<div
class="is-initial rounded-lg bg-warning text-base uppercase text-white"
>
jd
</div>
</div>
<div class="avatar h-12 w-12">
<div
class="is-initial rounded-lg bg-error text-base uppercase text-white"
>
jd
</div>
</div>
Squircle Initial Avatar
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 h-12 w-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 h-12 w-12">
<div
class="is-initial mask is-squircle bg-primary text-base uppercase text-white dark:bg-accent"
>
jd
</div>
</div>
<div class="avatar h-12 w-12">
<div
class="is-initial mask is-squircle bg-secondary text-base uppercase text-white"
>
jd
</div>
</div>
<div class="avatar h-12 w-12">
<div class="is-initial mask is-squircle bg-info text-base uppercase text-white">
jd
</div>
</div>
<div class="avatar h-12 w-12">
<div
class="is-initial mask is-squircle bg-success text-base uppercase text-white"
>
jd
</div>
</div>
<div class="avatar h-12 w-12">
<div
class="is-initial mask is-squircle bg-warning text-base uppercase text-white"
>
jd
</div>
</div>
<div class="avatar h-12 w-12">
<div
class="is-initial mask is-squircle bg-error text-base uppercase text-white"
>
jd
</div>
</div>
Soft Initial Avatar
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 h-12 w-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 h-12 w-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 h-12 w-12">
<div
class="is-initial rounded-full bg-info/10 text-base uppercase text-info"
>
jd
</div>
</div>
<div class="avatar h-12 w-12">
<div
class="is-initial rounded-full bg-success/10 text-base uppercase text-success"
>
jd
</div>
</div>
<div class="avatar h-12 w-12">
<div
class="is-initial rounded-full bg-warning/10 text-base uppercase text-warning"
>
jd
</div>
</div>
<div class="avatar h-12 w-12">
<div
class="is-initial rounded-full bg-error/10 text-base uppercase text-error"
>
jd
</div>
</div>
Bordered Initial Avatar
Initial avatars can have a border. Check out code for detail of usage.
jd
jd
jd
jd
jd
jd
<div class="avatar h-12 w-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 h-12 w-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 h-12 w-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 h-12 w-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 h-12 w-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 h-12 w-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
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 h-12 w-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 h-12 w-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 h-12 w-12">
<div class="is-initial rounded-lg bg-info/10 text-base uppercase text-info">
jd
</div>
</div>
<div class="avatar h-12 w-12">
<div
class="is-initial rounded-lg bg-success/10 text-base uppercase text-success"
>
jd
</div>
</div>
<div class="avatar h-12 w-12">
<div
class="is-initial rounded-lg bg-warning/10 text-base uppercase text-warning"
>
jd
</div>
</div>
<div class="avatar h-12 w-12">
<div
class="is-initial rounded-lg bg-error/10 text-base uppercase text-error"
>
jd
</div>
</div>
Avatar With Dots
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 h-8 w-8">
<img
class="rounded-full"
src="images/200x200.png"
alt="avatar"
/>
<div
class="absolute right-0 h-2.5 w-2.5 rounded-full border border-white bg-primary dark:border-navy-700 dark:bg-accent"
></div>
</div>
<div class="avatar h-10 w-10">
<img
class="rounded-full"
src="images/200x200.png"
alt="avatar"
/>
<div
class="absolute right-0 h-3 w-3 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
></div>
</div>
<div class="avatar h-12 w-12">
<img
class="rounded-full"
src="images/200x200.png"
alt="avatar"
/>
<div
class="absolute right-0 h-3.5 w-3.5 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
></div>
</div>
<div class="avatar h-16 w-16">
<img
class="rounded-full"
src="images/200x200.png"
alt="avatar"
/>
<div
class="absolute right-0 m-0.5 h-3.5 w-3.5 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
></div>
</div>
<div class="avatar h-20 w-20">
<img
class="rounded-full"
src="images/200x200.png"
alt="avatar"
/>
<div
class="absolute right-0 m-1 h-4 w-4 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
></div>
</div>
<div class="avatar h-24 w-24">
<img
class="rounded-full"
src="images/200x200.png"
alt="avatar"
/>
<div
class="absolute right-0 m-1.5 h-4 w-4 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
></div>
</div>
Squircle Avatar Dots
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 h-8 w-8">
<img
class="mask is-squircle"
src="images/200x200.png"
alt="avatar"
/>
<div
class="absolute right-0 -m-px h-2.5 w-2.5 rounded-full border border-white bg-primary dark:border-navy-700 dark:bg-accent"
></div>
</div>
<div class="avatar h-10 w-10">
<img
class="mask is-squircle"
src="images/200x200.png"
alt="avatar"
/>
<div
class="absolute right-0 -m-0.5 h-3 w-3 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
></div>
</div>
<div class="avatar h-12 w-12">
<img
class="mask is-squircle"
src="images/200x200.png"
alt="avatar"
/>
<div
class="absolute right-0 -m-0.5 h-3.5 w-3.5 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
></div>
</div>
<div class="avatar h-16 w-16">
<img
class="mask is-squircle"
src="images/200x200.png"
alt="avatar"
/>
<div
class="absolute right-0 -m-px h-3.5 w-3.5 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
></div>
</div>
<div class="avatar h-20 w-20">
<img
class="mask is-squircle"
src="images/200x200.png"
alt="avatar"
/>
<div
class="absolute right-0 h-4 w-4 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
></div>
</div>
<div class="avatar h-24 w-24">
<img
class="mask is-squircle"
src="images/200x200.png"
alt="avatar"
/>
<div
class="absolute right-0 h-4 w-4 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
></div>
</div>
Initial With Dots
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 h-8 w-8">
<div
class="is-initial rounded-full bg-slate-200 text-xs+ uppercase text-slate-600 dark:bg-navy-500 dark:text-navy-100"
>
jd
</div>
<div
class="absolute right-0 h-2.5 w-2.5 rounded-full border border-white bg-primary dark:border-navy-700 dark:bg-accent"
></div>
</div>
<div class="avatar h-10 w-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 h-3 w-3 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
></div>
</div>
<div class="avatar h-12 w-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 h-3.5 w-3.5 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
></div>
</div>
<div class="avatar h-16 w-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 h-3.5 w-3.5 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
></div>
</div>
<div class="avatar h-20 w-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 h-4 w-4 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
></div>
</div>
<div class="avatar h-24 w-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 h-4 w-4 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
></div>
</div>
Avatar Dot Colors
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 h-12 w-12">
<img
class="rounded-full"
src="images/200x200.png"
alt="avatar"
/>
<div
class="absolute right-0 h-3.5 w-3.5 rounded-full border-2 border-white bg-slate-300 dark:border-navy-700"
></div>
</div>
<div class="avatar h-12 w-12">
<img
class="rounded-full"
src="images/200x200.png"
alt="avatar"
/>
<div
class="absolute right-0 h-3.5 w-3.5 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
></div>
</div>
<div class="avatar h-12 w-12">
<img
class="rounded-full"
src="images/200x200.png"
alt="avatar"
/>
<div
class="absolute right-0 h-3.5 w-3.5 rounded-full border-2 border-white bg-secondary dark:border-navy-700 dark:bg-secondary-light"
></div>
</div>
<div class="avatar h-12 w-12">
<img
class="rounded-full"
src="images/200x200.png"
alt="avatar"
/>
<div
class="absolute right-0 h-3.5 w-3.5 rounded-full border-2 border-white bg-info dark:border-navy-700"
></div>
</div>
<div class="avatar h-12 w-12">
<img
class="rounded-full"
src="images/200x200.png"
alt="avatar"
/>
<div
class="absolute right-0 h-3.5 w-3.5 rounded-full border-2 border-white bg-success dark:border-navy-700"
></div>
</div>
<div class="avatar h-12 w-12">
<img
class="rounded-full"
src="images/200x200.png"
alt="avatar"
/>
<div
class="absolute right-0 h-3.5 w-3.5 rounded-full border-2 border-white bg-warning dark:border-navy-700"
></div>
</div>
<div class="avatar h-12 w-12">
<img
class="rounded-full"
src="images/200x200.png"
alt="avatar"
/>
<div
class="absolute right-0 h-3.5 w-3.5 rounded-full border-2 border-white bg-error dark:border-navy-700"
></div>
</div>
Avatar Dot Ping
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 h-12 w-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 h-3.5 w-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 h-12 w-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 h-3.5 w-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 h-12 w-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 h-3.5 w-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 h-12 w-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 h-3.5 w-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 h-12 w-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 h-3.5 w-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 h-12 w-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 h-3.5 w-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
Avatar dot position can be up, down, left and right. Check out code for detail of usage.
jd
jd
jd
jd
<div class="avatar h-12 w-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 h-3.5 w-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 h-12 w-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 h-3.5 w-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 h-12 w-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 h-3.5 w-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 h-12 w-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 h-3.5 w-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
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 h-8 w-8 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-8 w-8 hover:z-10">
<div
class="is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700"
>
jd
</div>
</div>
<div class="avatar h-8 w-8 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-8 w-8 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-8 w-8 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-8 w-8 hover:z-10">
<img
class="rounded-full ring ring-white dark:ring-navy-700"
src="images/200x200.png"
alt="avatar"
/>
</div>
</div>
Square Avatar Group
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 h-8 w-8 hover:z-10">
<img
class="rounded-xl ring ring-white dark:ring-navy-700"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-8 w-8 hover:z-10">
<div
class="is-initial rounded-xl bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700"
>
jd
</div>
</div>
<div class="avatar h-8 w-8 hover:z-10">
<img
class="rounded-xl ring ring-white dark:ring-navy-700"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-8 w-8 hover:z-10">
<img
class="rounded-xl ring ring-white dark:ring-navy-700"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-8 w-8 hover:z-10">
<img
class="rounded-xl ring ring-white dark:ring-navy-700"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div class="avatar h-8 w-8 hover:z-10">
<img
class="rounded-xl ring ring-white dark:ring-navy-700"
src="images/200x200.png"
alt="avatar"
/>
</div>
</div>
Gradient Border
Border avatars can be gradient colors. Check out code for detail of usage.
<div
class="flex h-16 w-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 h-16 w-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 h-16 w-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 h-16 w-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 h-3.5 w-3.5 rounded-full border-2 border-white bg-error dark:border-navy-700"
></div>
</div>
</div>
<div
class="flex h-16 w-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
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 h-8 w-8">
<div
class="is-initial rounded-full bg-slate-200 text-xs+ 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 h-8 w-8">
<div
class="is-initial rounded-full bg-slate-200 text-xs+ text-white ring ring-white dark:bg-navy-500 dark:ring-navy-700"
>
<i class="fa fa-user"></i>
</div>
</div>
<div class="avatar h-8 w-8">
<div
class="is-initial rounded-full bg-slate-200 text-xs+ text-white ring ring-white dark:bg-navy-500 dark:ring-navy-700"
>
<i class="fa fa-user"></i>
</div>
</div>
<div class="avatar h-8 w-8">
<div
class="is-initial rounded-full bg-slate-200 text-xs+ text-white ring ring-white dark:bg-navy-500 dark:ring-navy-700"
>
<i class="fa fa-user"></i>
</div>
</div>
<div class="avatar h-8 w-8">
<div
class="is-initial rounded-full bg-slate-200 text-xs+ text-white ring ring-white dark:bg-navy-500 dark:ring-navy-700"
>
<i class="fa fa-user"></i>
</div>
</div>
<div class="avatar h-8 w-8">
<div
class="is-initial rounded-full bg-slate-200 text-xs+ text-white ring ring-white dark:bg-navy-500 dark:ring-navy-700"
>
<i class="fa fa-user"></i>
</div>
</div>
</div>