'/%3e%3cpath%20d='M19.3718%208.44531C13.2794%208.77342%208.42255%2013.8273%208.42255%2020.0001V34.643C8.42255%2036.336%207.05011%2037.7085%205.35714%2037.7085C3.66416%2037.7085%202.29171%2036.336%202.29171%2034.643V22.0124C5.86298%2012.0352%2013.2293%208.65628%2019.3718%208.44531Z'%20fill='url(%23paint1_linear_1134_24406)'/%3e%3cpath%20d='M24.111%2018.6378L20.8502%2019.8353L19.6368%2023.0902L18.4392%2019.8294L15.1843%2018.616L18.4451%2017.4184L19.6586%2014.1636L20.8561%2017.4243L24.111%2018.6378Z'%20fill='url(%23paint2_linear_1134_24406)'/%3e%3cpath%20d='M26.0749%2014.0398L24.7502%2014.5263L24.2573%2015.8486L23.7708%2014.5239L22.4485%2014.0309L23.7732%2013.5444L24.2661%2012.2221L24.7526%2013.5468L26.0749%2014.0398Z'%20fill='url(%23paint3_linear_1134_24406)'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_1134_24406'%20x1='21.5672'%20y1='33.2429'%20x2='17.6287'%20y2='7.94212'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%235711F6'/%3e%3cstop%20offset='0.5'%20stop-color='%239614EB'/%3e%3cstop%20offset='1'%20stop-color='%23FF1ADE'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear_1134_24406'%20x1='5.99286'%20y1='14.1017'%20x2='11.3239'%20y2='34.0911'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%235711F6'/%3e%3cstop%20offset='0.5'%20stop-color='%239614EB'/%3e%3cstop%20offset='1'%20stop-color='%23FF1ADE'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint2_linear_1134_24406'%20x1='16.5589'%20y1='17.1615'%20x2='24.3278'%20y2='18.3903'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%235711F6'/%3e%3cstop%20offset='0.5'%20stop-color='%239614EB'/%3e%3cstop%20offset='1'%20stop-color='%23FF1ADE'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint3_linear_1134_24406'%20x1='16.5589'%20y1='17.1615'%20x2='24.3278'%20y2='18.3903'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%235711F6'/%3e%3cstop%20offset='0.5'%20stop-color='%239614EB'/%3e%3cstop%20offset='1'%20stop-color='%23FF1ADE'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
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-border-color rounded-full" src="assets/img/avatar/avatar-01.jpg" alt="avatar">
<img class="w-4 h-4 border border-border-color rounded-full" src="assets/img/avatar/avatar-02.jpg" alt="avatar">
<img class="w-5 h-5 border border-border-color rounded-full" src="assets/img/avatar/avatar-03.jpg" alt="avatar">
<img class="w-6 h-6 border border-border-color rounded-full" src="assets/img/avatar/avatar-04.jpg" alt="avatar">
<img class="w-8 h-8 border border-border-color rounded-full" src="assets/img/avatar/avatar-05.jpg" alt="avatar">
<img class="w-10 h-10 border border-border-color rounded-full" src="assets/img/avatar/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-border-color rounded-xs" src="assets/img/avatar/avatar-14.jpg" alt="avatar">
<img class="w-4 h-4 border border-border-color rounded-xs" src="assets/img/avatar/avatar-15.jpg" alt="avatar">
<img class="w-5 h-5 border border-border-color rounded-sm" src="assets/img/avatar/avatar-16.jpg" alt="avatar">
<img class="w-6 h-6 border border-border-color rounded-md" src="assets/img/avatar/avatar-17.jpg" alt="avatar">
<img class="w-8 h-8 border border-border-color rounded-lg" src="assets/img/avatar/avatar-18.jpg" alt="avatar">
<img class="w-10 h-10 border border-border-color rounded-lg" src="assets/img/avatar/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-light border border-border-color rounded-full text-xs text-dark flex justify-center items-center font-semibold">AI</span>
<span class="w-5 h-5 bg-light border border-border-color rounded-full text-xs text-dark flex justify-center items-center font-semibold">AI</span>
<span class="w-6 h-6 bg-light border border-border-color rounded-full text-xs text-dark flex justify-center items-center font-semibold">AI</span>
<span class="w-8 h-8 bg-light border border-border-color rounded-full text-[13px] text-dark flex justify-center items-center font-semibold">AI</span>
<span class="w-10 h-10 bg-light border border-border-color rounded-full text-dark flex justify-center items-center font-semibold">AI</span>
<span class="w-11 h-11 bg-light border border-border-color rounded-full text-dark 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-light border border-border-color rounded-xs text-xs text-dark flex justify-center items-center font-semibold">AI</span>
<span class="w-5 h-5 bg-light border border-border-color rounded-sm text-xs text-dark flex justify-center items-center font-semibold">AI</span>
<span class="w-6 h-6 bg-light border border-border-color rounded-md text-xs text-dark flex justify-center items-center font-semibold">AI</span>
<span class="w-8 h-8 bg-light border border-border-color rounded-lg text-[13px] text-dark flex justify-center items-center font-semibold">AI</span>
<span class="w-10 h-10 bg-light border border-border-color rounded-lg text-dark flex justify-center items-center font-semibold">AI</span>
<span class="w-11 h-11 bg-light border border-border-color rounded-xl text-dark 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 class="icon icon-user"></i> </span>
<span class="w-5 h-5 bg-primary rounded-full text-white flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-6 h-6 bg-primary rounded-full text-white flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-8 h-8 bg-primary rounded-full text-white flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-10 h-10 bg-primary rounded-full text-white flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-11 h-11 bg-primary rounded-full text-white flex justify-center items-center"><i class="icon icon-user"></i> </span>
</div>
<div class="flex flex-wrap items-end lg:justify-between justify-start gap-3">
<span class="w-4 h-4 bg-light border border-border-color rounded-full text-dark flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-5 h-5 bg-light border border-border-color rounded-full text-dark flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-6 h-6 bg-light border border-border-color rounded-full text-dark flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-8 h-8 bg-light border border-border-color rounded-full text-dark flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-10 h-10 bg-light border border-border-color rounded-full text-dark flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-11 h-11 bg-light border border-border-color rounded-full text-dark flex justify-center items-center"><i class="icon icon-user"></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 class="icon icon-user"></i> </span>
<span class="w-5 h-5 bg-primary rounded-sm text-white flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-6 h-6 bg-primary rounded-md text-white flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-8 h-8 bg-primary rounded-lg text-white flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-10 h-10 bg-primary rounded-lg text-white flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-11 h-11 bg-primary rounded-xl text-white flex justify-center items-center"><i class="icon icon-user"></i> </span>
</div>
<div class="flex flex-wrap items-end lg:justify-between justify-start gap-3">
<span class="w-4 h-4 bg-light border border-border-color rounded-xs text-dark flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-5 h-5 bg-light border border-border-color rounded-sm text-dark flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-6 h-6 bg-light border border-border-color rounded-md text-dark flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-8 h-8 bg-light border border-border-color rounded-lg text-dark flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-10 h-10 bg-light border border-border-color rounded-lg text-dark flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-11 h-11 bg-light border border-border-color rounded-xl text-dark flex justify-center items-center"><i class="icon icon-user"></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-border-color" src="assets/img/avatar/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-border-color" src="assets/img/avatar/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-border-color" src="assets/img/avatar/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-border-color text-[12px] bg-light text-dark" 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-border-color" src="assets/img/avatar/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-border-color" src="assets/img/avatar/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-border-color" src="assets/img/avatar/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-border-color text-[13px] bg-light text-dark" 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-border-color" src="assets/img/avatar/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-border-color" src="assets/img/avatar/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-border-color" src="assets/img/avatar/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-border-color text-[14px] bg-light text-dark" 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-border-color" src="assets/img/avatar/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-border-color" src="assets/img/avatar/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-border-color" src="assets/img/avatar/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-border-color text-[12px] bg-light text-dark" 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-border-color" src="assets/img/avatar/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-border-color" src="assets/img/avatar/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-border-color" src="assets/img/avatar/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-border-color text-[13px] bg-light text-dark" 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-border-color" src="assets/img/avatar/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-border-color" src="assets/img/avatar/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-border-color" src="assets/img/avatar/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-border-color text-[14px] bg-light text-dark" 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-light border border-border-color rounded-full text-dark flex justify-center items-center"><i class="icon icon-user"></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-light border border-border-color rounded-full text-dark flex justify-center items-center"><i class="icon icon-user"></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-light border border-border-color rounded-full text-dark flex justify-center items-center"><i class="icon icon-user"></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-light border border-border-color rounded-full text-dark flex justify-center items-center"><i class="icon icon-user"></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-light border border-border-color rounded-full text-dark flex justify-center items-center"><i class="icon icon-user"></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-light border border-border-color rounded-full text-dark flex justify-center items-center"><i class="icon icon-user"></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-border-color rounded-full" src="assets/img/avatar/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-border-color rounded-full" src="assets/img/avatar/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-border-color rounded-full" src="assets/img/avatar/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-border-color rounded-full" src="assets/img/avatar/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-border-color rounded-full" src="assets/img/avatar/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-border-color rounded-full" src="assets/img/avatar/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-light border border-border-color rounded-xs text-dark flex justify-center items-center"><i class="icon icon-user"></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-light border border-border-color rounded-sm text-dark flex justify-center items-center"><i class="icon icon-user"></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-light border border-border-color rounded-md text-dark flex justify-center items-center"><i class="icon icon-user"></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-light border border-border-color rounded-lg text-dark flex justify-center items-center"><i class="icon icon-user"></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-light border border-border-color rounded-lg text-dark flex justify-center items-center"><i class="icon icon-user"></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-light border border-border-color rounded-xl text-dark flex justify-center items-center"><i class="icon icon-user"></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-border-color rounded-xs" src="assets/img/avatar/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-border-color rounded-sm" src="assets/img/avatar/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-border-color rounded-md" src="assets/img/avatar/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-border-color rounded-lg" src="assets/img/avatar/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-border-color rounded-lg" src="assets/img/avatar/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-border-color rounded-xl" src="assets/img/avatar/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>