Home
Dashboard
⌘K
Jump to
MessagesMark all read
DF
Daniel Foster
Client schedule updated for…
AS
Rachel Morgan
Can we add a 7 AM yoga slot?
Avatar
Circular Avatars
<div class="flex flex-wrap items-end justify-start lg:justify-between! gap-3 border-dashed border-primary border px-4.5 py-5 rounded-md">
<img class="w-3 h-3 border border-[var(--border)] rounded-full" src="assets/img/avatars/avatar-01.jpg" alt="avatar">
<img class="w-4 h-4 border border-[var(--border)] rounded-full" src="assets/img/avatars/avatar-02.jpg" alt="avatar">
<img class="w-5 h-5 border border-[var(--border)] rounded-full" src="assets/img/avatars/avatar-03.jpg" alt="avatar">
<img class="w-6 h-6 border border-[var(--border)] rounded-full" src="assets/img/avatars/avatar-04.jpg" alt="avatar">
<img class="w-8 h-8 border border-[var(--border)] rounded-full" src="assets/img/avatars/avatar-05.jpg" alt="avatar">
<img class="w-10 h-10 border border-[var(--border)] rounded-full" src="assets/img/avatars/avatar-06.jpg" alt="avatar">
</div>
Square Avatars
<div class="flex flex-wrap items-end justify-start lg:justify-between! gap-3 border-dashed border-primary border px-4.5 py-5 rounded-md">
<img class="w-3 h-3 border border-[var(--border)] rounded-xs" src="assets/img/avatars/avatar-14.jpg" alt="avatar">
<img class="w-4 h-4 border border-[var(--border)] rounded-xs" src="assets/img/avatars/avatar-15.jpg" alt="avatar">
<img class="w-5 h-5 border border-[var(--border)] rounded-sm" src="assets/img/avatars/avatar-16.jpg" alt="avatar">
<img class="w-6 h-6 border border-[var(--border)] rounded-md" src="assets/img/avatars/avatar-17.jpg" alt="avatar">
<img class="w-8 h-8 border border-[var(--border)] rounded-lg" src="assets/img/avatars/avatar-18.jpg" alt="avatar">
<img class="w-10 h-10 border border-[var(--border)] rounded-lg" src="assets/img/avatars/avatar-19.jpg" alt="avatar">
</div>
Circular Avatars with Placeholder
AI
AI
AI
AI
AI
AI
AI
AI
AI
AI
AI
AI
<div class="border-dashed border-primary border px-4.5 py-5 rounded-md">
<div class="flex flex-wrap items-end lg:justify-between justify-start gap-3 lg:mb-12 mb-5">
<span class="w-4 h-4 bg-primary rounded-full text-xs text-white flex justify-center items-center font-semibold">AI</span>
<span class="w-5 h-5 bg-primary rounded-full text-xs text-white flex justify-center items-center font-semibold">AI</span>
<span class="w-6 h-6 bg-primary rounded-full text-xs text-white flex justify-center items-center font-semibold">AI</span>
<span class="w-8 h-8 bg-primary rounded-full text-[13px] text-white flex justify-center items-center font-semibold">AI</span>
<span class="w-10 h-10 bg-primary rounded-full text-white flex justify-center items-center font-semibold">AI</span>
<span class="w-11 h-11 bg-primary rounded-full text-white flex justify-center items-center font-semibold">AI</span>
</div>
<div class="flex flex-wrap items-end lg:justify-between justify-start gap-3">
<span class="w-4 h-4 bg-[var(--surface)] border border-[var(--border)] rounded-full text-xs text-dark dark:text-white flex justify-center items-center font-semibold">AI</span>
<span class="w-5 h-5 bg-[var(--surface)] border border-[var(--border)] rounded-full text-xs text-dark dark:text-white flex justify-center items-center font-semibold">AI</span>
<span class="w-6 h-6 bg-[var(--surface)] border border-[var(--border)] rounded-full text-xs text-dark dark:text-white flex justify-center items-center font-semibold">AI</span>
<span class="w-8 h-8 bg-[var(--surface)] border border-[var(--border)] rounded-full text-[13px] text-dark dark:text-white flex justify-center items-center font-semibold">AI</span>
<span class="w-10 h-10 bg-[var(--surface)] border border-[var(--border)] rounded-full text-dark dark:text-white flex justify-center items-center font-semibold">AI</span>
<span class="w-11 h-11 bg-[var(--surface)] border border-[var(--border)] rounded-full text-dark dark:text-white flex justify-center items-center font-semibold">AI</span>
</div>
</div>
Square Avatars with Placeholder
AI
AI
AI
AI
AI
AI
AI
AI
AI
AI
AI
AI
<div class="border-dashed border-primary border px-4.5 py-5 rounded-md">
<div class="flex flex-wrap items-end lg:justify-between justify-start gap-3 lg:mb-12 mb-5">
<span class="w-4 h-4 bg-primary rounded-xs text-xs text-white flex justify-center items-center font-semibold">AI</span>
<span class="w-5 h-5 bg-primary rounded-sm text-xs text-white flex justify-center items-center font-semibold">AI</span>
<span class="w-6 h-6 bg-primary rounded-md text-xs text-white flex justify-center items-center font-semibold">AI</span>
<span class="w-8 h-8 bg-primary rounded-lg text-[13px] text-white flex justify-center items-center font-semibold">AI</span>
<span class="w-10 h-10 bg-primary rounded-lg text-white flex justify-center items-center font-semibold">AI</span>
<span class="w-11 h-11 bg-primary rounded-xl text-white flex justify-center items-center font-semibold">AI</span>
</div>
<div class="flex flex-wrap items-end lg:justify-between justify-start gap-3">
<span class="w-4 h-4 bg-[var(--surface)] border border-[var(--border)] rounded-xs text-xs text-dark dark:text-white flex justify-center items-center font-semibold">AI</span>
<span class="w-5 h-5 bg-[var(--surface)] border border-[var(--border)] rounded-sm text-xs text-dark dark:text-white flex justify-center items-center font-semibold">AI</span>
<span class="w-6 h-6 bg-[var(--surface)] border border-[var(--border)] rounded-md text-xs text-dark dark:text-white flex justify-center items-center font-semibold">AI</span>
<span class="w-8 h-8 bg-[var(--surface)] border border-[var(--border)] rounded-lg text-[13px] text-dark dark:text-white flex justify-center items-center font-semibold">AI</span>
<span class="w-10 h-10 bg-[var(--surface)] border border-[var(--border)] rounded-lg text-dark dark:text-white flex justify-center items-center font-semibold">AI</span>
<span class="w-11 h-11 bg-[var(--surface)] border border-[var(--border)] rounded-xl text-dark dark:text-white flex justify-center items-center font-semibold">AI</span>
</div>
</div>
Circular Avatars with Placeholder Icons
<div class="border-dashed border-primary border px-4.5 py-5 rounded-md">
<div class="flex flex-wrap items-end lg:justify-between justify-start gap-3 lg:mb-12 mb-5">
<span class="w-4 h-4 bg-primary rounded-full text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i> </span>
<span class="w-5 h-5 bg-primary rounded-full text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i> </span>
<span class="w-6 h-6 bg-primary rounded-full text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i> </span>
<span class="w-8 h-8 bg-primary rounded-full text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i> </span>
<span class="w-10 h-10 bg-primary rounded-full text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i> </span>
<span class="w-11 h-11 bg-primary rounded-full text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i> </span>
</div>
<div class="flex flex-wrap items-end lg:justify-between justify-start gap-3">
<span class="w-4 h-4 bg-[var(--surface)] border border-[var(--border)] rounded-full text-dark dark:text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i> </span>
<span class="w-5 h-5 bg-[var(--surface)] border border-[var(--border)] rounded-full text-dark dark:text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i> </span>
<span class="w-6 h-6 bg-[var(--surface)] border border-[var(--border)] rounded-full text-dark dark:text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i> </span>
<span class="w-8 h-8 bg-[var(--surface)] border border-[var(--border)] rounded-full text-dark dark:text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i> </span>
<span class="w-10 h-10 bg-[var(--surface)] border border-[var(--border)] rounded-full text-dark dark:text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i> </span>
<span class="w-11 h-11 bg-[var(--surface)] border border-[var(--border)] rounded-full text-dark dark:text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i> </span>
</div>
</div>
Square Avatars with Placeholder Icons
<div class="border-dashed border-primary border px-4.5 py-5 rounded-md">
<div class="flex flex-wrap items-end lg:justify-between justify-start gap-3 lg:mb-12 mb-5">
<span class="w-4 h-4 bg-primary rounded-xs text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i> </span>
<span class="w-5 h-5 bg-primary rounded-sm text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i> </span>
<span class="w-6 h-6 bg-primary rounded-md text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i> </span>
<span class="w-8 h-8 bg-primary rounded-lg text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i> </span>
<span class="w-10 h-10 bg-primary rounded-lg text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i> </span>
<span class="w-11 h-11 bg-primary rounded-xl text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i> </span>
</div>
<div class="flex flex-wrap items-end lg:justify-between justify-start gap-3">
<span class="w-4 h-4 bg-[var(--surface)] border border-[var(--border)] rounded-xs text-dark dark:text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i> </span>
<span class="w-5 h-5 bg-[var(--surface)] border border-[var(--border)] rounded-sm text-dark dark:text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i> </span>
<span class="w-6 h-6 bg-[var(--surface)] border border-[var(--border)] rounded-md text-dark dark:text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i> </span>
<span class="w-8 h-8 bg-[var(--surface)] border border-[var(--border)] rounded-lg text-dark dark:text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i> </span>
<span class="w-10 h-10 bg-[var(--surface)] border border-[var(--border)] rounded-lg text-dark dark:text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i> </span>
<span class="w-11 h-11 bg-[var(--surface)] border border-[var(--border)] rounded-xl text-dark dark:text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i> </span>
</div>
</div>
Circular Avatar Group
<div>
<div class="flex flex-wrap lg:justify-between! justify-center gap-10 items-end border-dashed border-primary border px-4.5 py-5 rounded-md">
<div class="avatar-list-stacked">
<img class="w-6 h-6 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-full border border-[var(--border)]" src="assets/img/avatars/avatar-27.jpg" alt="img">
<img class="w-6 h-6 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-full border border-[var(--border)]" src="assets/img/avatars/avatar-28.jpg" alt="img">
<img class="w-6 h-6 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-full border border-[var(--border)]" src="assets/img/avatars/avatar-29.jpg" alt="img">
<a class="w-6 h-6 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-full border border-[var(--border)] text-[12px] bg-[var(--surface)] text-dark dark:text-white" href="javascript:void(0);"> +8 </a>
</div>
<div class="avatar-list-stacked">
<img class="w-8 h-8 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-full border border-[var(--border)]" src="assets/img/avatars/avatar-01.jpg" alt="img">
<img class="w-8 h-8 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-full border border-[var(--border)]" src="assets/img/avatars/avatar-02.jpg" alt="img">
<img class="w-8 h-8 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-full border border-[var(--border)]" src="assets/img/avatars/avatar-03.jpg" alt="img">
<a class="w-8 h-8 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-full border border-[var(--border)] text-[13px] bg-[var(--surface)] text-dark dark:text-white" href="javascript:void(0);"> +8 </a>
</div>
<div class="avatar-list-stacked pr-4.5">
<img class="w-10 h-10 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-full border border-[var(--border)]" src="assets/img/avatars/avatar-04.jpg" alt="img">
<img class="w-10 h-10 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-full border border-[var(--border)]" src="assets/img/avatars/avatar-05.jpg" alt="img">
<img class="w-10 h-10 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-full border border-[var(--border)]" src="assets/img/avatars/avatar-06.jpg" alt="img">
<a class="w-10 h-10 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-full border border-[var(--border)] text-[14px] bg-[var(--surface)] text-dark dark:text-white" href="javascript:void(0);"> +8 </a>
</div>
</div>
Square Avatar Group
<div>
<div class="flex flex-wrap lg:justify-between! justify-center gap-10 items-end border-dashed border-primary border px-4.5 py-5 rounded-md">
<div class="avatar-list-stacked">
<img class="w-6 h-6 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-md border border-[var(--border)]" src="assets/img/avatars/avatar-06.jpg" alt="img">
<img class="w-6 h-6 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-md border border-[var(--border)]" src="assets/img/avatars/avatar-07.jpg" alt="img">
<img class="w-6 h-6 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-md border border-[var(--border)]" src="assets/img/avatars/avatar-08.jpg" alt="img">
<a class="w-6 h-6 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-md border border-[var(--border)] text-[12px] bg-[var(--surface)] text-dark dark:text-white" href="javascript:void(0);"> +8 </a>
</div>
<div class="avatar-list-stacked">
<img class="w-8 h-8 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-lg border border-[var(--border)]" src="assets/img/avatars/avatar-09.jpg" alt="img">
<img class="w-8 h-8 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-lg border border-[var(--border)]" src="assets/img/avatars/avatar-10.jpg" alt="img">
<img class="w-8 h-8 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-lg border border-[var(--border)]" src="assets/img/avatars/avatar-11.jpg" alt="img">
<a class="w-8 h-8 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-lg border border-[var(--border)] text-[13px] bg-[var(--surface)] text-dark dark:text-white" href="javascript:void(0);"> +8 </a>
</div>
<div class="avatar-list-stacked pr-4.5">
<img class="w-10 h-10 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-lg border border-[var(--border)]" src="assets/img/avatars/avatar-12.jpg" alt="img">
<img class="w-10 h-10 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-lg border border-[var(--border)]" src="assets/img/avatars/avatar-13.jpg" alt="img">
<img class="w-10 h-10 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-lg border border-[var(--border)]" src="assets/img/avatars/avatar-14.jpg" alt="img">
<a class="w-10 h-10 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-lg border border-[var(--border)] text-[14px] bg-[var(--surface)] text-dark dark:text-white" href="javascript:void(0);"> +8 </a>
</div>
</div>
</div>
Circular Avatars with Dot
<div class="border-dashed border-primary border px-4.5 py-5 rounded-md">
<div class="flex flex-wrap items-end lg:justify-between justify-start gap-3 lg:mb-12 mb-5">
<span class="w-4 h-4 relative bg-[var(--surface)] border border-[var(--border)] rounded-full text-dark dark:text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i><span class="-bottom-0.5 -end-0.5 absolute size-1.5 bg-success border border-white rounded-full"></span></span>
<span class="w-5 h-5 relative bg-[var(--surface)] border border-[var(--border)] rounded-full text-dark dark:text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i><span class="bottom-0 end-0 absolute size-1.5 bg-success border border-white rounded-full"></span></span>
<span class="w-6 h-6 relative bg-[var(--surface)] border border-[var(--border)] rounded-full text-dark dark:text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i><span class="bottom-0 end-0 absolute size-1.5 bg-success border border-white rounded-full"></span></span>
<span class="w-8 h-8 relative bg-[var(--surface)] border border-[var(--border)] rounded-full text-dark dark:text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i><span class="bottom-0 end-0 absolute size-2 bg-success border border-white rounded-full"></span></span>
<span class="w-10 h-10 relative bg-[var(--surface)] border border-[var(--border)] rounded-full text-dark dark:text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i><span class="bottom-0.5 end-0.5 absolute size-2 bg-success border border-white rounded-full"></span></span>
<span class="w-11 h-11 relative bg-[var(--surface)] border border-[var(--border)] rounded-full text-dark dark:text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i><span class="bottom-0 end-1.5 absolute size-2 bg-success border border-white rounded-full"></span></span>
</div>
<div class="flex flex-wrap items-end lg:justify-between justify-start gap-3">
<span class="relative"><img class="w-4 h-4 border border-[var(--border)] rounded-full" src="assets/img/avatars/avatar-15.jpg" alt="avatar"><span class="bottom-0 -end-0.5 absolute size-1.5 bg-success border border-white rounded-full"></span></span>
<span class="relative"><img class="w-5 h-5 border border-[var(--border)] rounded-full" src="assets/img/avatars/avatar-16.jpg" alt="avatar"><span class="bottom-0 end-0 absolute size-1.5 bg-success border border-white rounded-full"></span></span>
<span class="relative"><img class="w-6 h-6 border border-[var(--border)] rounded-full" src="assets/img/avatars/avatar-17.jpg" alt="avatar"><span class="bottom-0 end-0.5 absolute size-1.5 bg-success border border-white rounded-full"></span></span>
<span class="relative"><img class="w-8 h-8 border border-[var(--border)] rounded-full" src="assets/img/avatars/avatar-18.jpg" alt="avatar"><span class="bottom-0 end-0.5 absolute size-2 bg-success border border-white rounded-full"></span></span>
<span class="relative"><img class="w-10 h-10 border border-[var(--border)] rounded-full" src="assets/img/avatars/avatar-19.jpg" alt="avatar"><span class="bottom-0 end-1.5 absolute size-2 bg-success border border-white rounded-full"></span></span>
<span class="relative"><img class="w-12 h-12 border border-[var(--border)] rounded-full" src="assets/img/avatars/avatar-20.jpg" alt="avatar"><span class="bottom-0 end-1.75 absolute size-2 bg-success border border-white rounded-full"></span></span>
</div>
</div>
Square Avatars with Dot
<div class="border-dashed border-primary border px-4.5 py-5 rounded-md">
<div class="flex flex-wrap items-end lg:justify-between justify-start gap-3 lg:mb-12 mb-5">
<span class="w-4 h-4 relative bg-[var(--surface)] border border-[var(--border)] rounded-xs text-dark dark:text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i><span class="bottom-0 end-0 absolute size-1.5 bg-success border border-white rounded-full"></span></span>
<span class="w-5 h-5 relative bg-[var(--surface)] border border-[var(--border)] rounded-sm text-dark dark:text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i><span class="bottom-0 end-0 absolute size-1.5 bg-success border border-white rounded-full"></span></span>
<span class="w-6 h-6 relative bg-[var(--surface)] border border-[var(--border)] rounded-md text-dark dark:text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i><span class="bottom-0 end-0 absolute size-1.5 bg-success border border-white rounded-full"></span></span>
<span class="w-8 h-8 relative bg-[var(--surface)] border border-[var(--border)] rounded-lg text-dark dark:text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i><span class="bottom-0 end-0 absolute size-2 bg-success border border-white rounded-full"></span></span>
<span class="w-10 h-10 relative bg-[var(--surface)] border border-[var(--border)] rounded-lg text-dark dark:text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i><span class="bottom-0 end-0 absolute size-2 bg-success border border-white rounded-full"></span></span>
<span class="w-11 h-11 relative bg-[var(--surface)] border border-[var(--border)] rounded-xl text-dark dark:text-white flex justify-center items-center"><i data-lucide="user" class="w-4 h-4"></i><span class="bottom-0 end-0 absolute size-2 bg-success border border-white rounded-full"></span></span>
</div>
<div class="flex flex-wrap items-end lg:justify-between justify-start gap-3">
<span class="relative"><img class="w-4 h-4 border border-[var(--border)] rounded-xs" src="assets/img/avatars/avatar-21.jpg" alt="avatar"><span class="bottom-0 end-0 absolute size-1.5 bg-success border border-white rounded-full"></span></span>
<span class="relative"><img class="w-5 h-5 border border-[var(--border)] rounded-sm" src="assets/img/avatars/avatar-22.jpg" alt="avatar"><span class="bottom-0 end-0 absolute size-1.5 bg-success border border-white rounded-full"></span></span>
<span class="relative"><img class="w-6 h-6 border border-[var(--border)] rounded-md" src="assets/img/avatars/avatar-23.jpg" alt="avatar"><span class="bottom-0 end-0 absolute size-1.5 bg-success border border-white rounded-full"></span></span>
<span class="relative"><img class="w-8 h-8 border border-[var(--border)] rounded-lg" src="assets/img/avatars/avatar-24.jpg" alt="avatar"><span class="bottom-0 end-0 absolute size-2 bg-success border border-white rounded-full"></span></span>
<span class="relative"><img class="w-10 h-10 border border-[var(--border)] rounded-lg" src="assets/img/avatars/avatar-25.jpg" alt="avatar"><span class="bottom-0 end-0 absolute size-2 bg-success border border-white rounded-full"></span></span>
<span class="relative"><img class="w-12 h-12 border border-[var(--border)] rounded-xl" src="assets/img/avatars/avatar-26.jpg" alt="avatar"><span class="bottom-0 end-0 absolute size-2 bg-success border border-white rounded-full"></span></span>
</div>
</div>