- Elements
- Avatar
Basic
Code
<!-- basic --> <img class="w-20 h-20 rounded-full overflow-hidden object-cover" src="/assets/images/profile-12.jpeg" alt="image" /> <img class="w-16 h-16 rounded-full overflow-hidden object-cover" src="/assets/images/profile-12.jpeg" alt="image" /> <img class="w-14 h-14 rounded-full overflow-hidden object-cover" src="/assets/images/profile-12.jpeg" alt="image" /> <img class="w-12 h-12 rounded-full overflow-hidden object-cover" src="/assets/images/profile-12.jpeg" alt="image" />
Indicators
Code
<!-- danger -->
<span class="w-20 h-20 relative">
<img class="w-20 h-20 rounded-full overflow-hidden object-cover" src="/assets/images/profile-12.jpeg" alt="image" />
<span class="absolute ltr:right-0 rtl:left-0 bottom-0 w-7 h-7 rounded-full ring-2 ring-white dark:ring-white-dark bg-danger"></span>
</span>
<!-- success -->
<span class="w-16 h-16 relative">
<img class="w-16 h-16 rounded-full overflow-hidden object-cover" src="/assets/images/profile-12.jpeg" alt="image" />
<span class="absolute ltr:right-0 rtl:left-0 bottom-0 w-6 h-6 rounded-full ring-2 ring-white dark:ring-white-dark bg-success"></span>
</span>
<!-- secondary -->
<span class="w-14 h-14 relative">
<img class="w-14 h-14 rounded-full overflow-hidden object-cover" src="/assets/images/profile-12.jpeg" alt="image" />
<span class="absolute ltr:right-0 rtl:left-0 bottom-0 w-5 h-5 rounded-full ring-2 ring-white dark:ring-white-dark bg-secondary"></span>
</span>
<!-- info -->
<span class="w-12 h-12 relative">
<img class="w-12 h-12 rounded-full overflow-hidden object-cover" src="/assets/images/profile-12.jpeg" alt="image" />
<span class="absolute ltr:right-0 rtl:left-0 bottom-0 w-4 h-4 rounded-full ring-2 ring-white dark:ring-white-dark bg-info"></span>
</span>
Shapes
Code
<!-- squre rounded large --> <img class="w-20 h-20 rounded-md overflow-hidden object-cover" src="/assets/images/profile-12.jpeg" alt="image" /> <!-- circle --> <img class="w-16 h-16 rounded-full overflow-hidden object-cover" src="/assets/images/profile-12.jpeg" alt="image" /> <!-- squre rounded small --> <img class="w-14 h-14 rounded-md overflow-hidden object-cover" src="/assets/images/profile-12.jpeg" alt="image" /> <!-- squre --> <img class="w-10 h-10 overflow-hidden object-cover" src="/assets/images/profile-12.jpeg" alt="image" />
Initials
Code
AG
AG
AG
AG
<!-- success --> <span class="flex justify-center items-center w-20 h-20 text-center rounded-full object-cover bg-success text-2xl">AG</span> <!-- primary --> <span class="flex justify-center items-center w-16 h-16 text-center rounded-full object-cover bg-primary text-xl">AG</span> <!-- info --> <span class="flex justify-center items-center w-14 h-14 text-center rounded-full object-cover bg-info text-lg">AG</span> <!-- danger --> <span class="flex justify-center items-center w-10 h-10 text-center rounded-full object-cover bg-danger text-base">AG</span>
Group
Code
AG
AG
<!-- large -->
<div class="flex items-center justify-center -space-x-4 rtl:space-x-reverse text-white">
<img class="w-16 h-16 rounded-full overflow-hidden object-cover ring-2 ring-white dark:ring-white-dark" src="/assets/images/profile-12.jpeg" alt="image" />
<img class="w-16 h-16 rounded-full overflow-hidden object-cover ring-2 ring-white dark:ring-white-dark" src="/assets/images/profile-12.jpeg" alt="image" />
<img class="w-16 h-16 rounded-full overflow-hidden object-cover ring-2 ring-white dark:ring-white-dark" src="/assets/images/profile-12.jpeg" alt="image" />
<span class="flex justify-center items-center w-16 h-16 text-center rounded-full object-cover bg-info text-xl ring-2 ring-white dark:ring-white-dark">AG</span>
</div>
<!-- small -->
<div class="flex items-center justify-center -space-x-4 rtl:space-x-reverse text-white">
<img class="w-12 h-12 rounded-full overflow-hidden object-cover ring-2 ring-white dark:ring-white-dark" src="/assets/images/profile-12.jpeg" alt="image" />
<img class="w-12 h-12 rounded-full overflow-hidden object-cover ring-2 ring-white dark:ring-white-dark" src="/assets/images/profile-12.jpeg" alt="image" />
<img class="w-12 h-12 rounded-full overflow-hidden object-cover ring-2 ring-white dark:ring-white-dark" src="/assets/images/profile-12.jpeg" alt="image" />
<span class="flex justify-center items-center w-12 h-12 text-center rounded-full object-cover bg-info text-base ring-2 ring-white dark:ring-white-dark">AG</span>
</div>
Animate Y-axis
Code
AG
<!-- animate y axis -->
<div class="flex items-center justify-center -space-x-4 rtl:space-x-reverse text-white">
<img class="w-12 h-12 rounded-full object-cover ring-2 ring-white dark:ring-white-dark relative transition-all duration-300 hover:hover:translate-y-2" src="/assets/images/profile-12.jpeg" alt="image" />
<img class="w-12 h-12 rounded-full object-cover ring-2 ring-white dark:ring-white-dark relative transition-all duration-300 hover:hover:translate-y-2" src="/assets/images/profile-12.jpeg" alt="image" />
<img class="w-12 h-12 rounded-full object-cover ring-2 ring-white dark:ring-white-dark relative transition-all duration-300 hover:hover:translate-y-2" src="/assets/images/profile-12.jpeg" alt="image" />
<span class="flex justify-center items-center w-12 h-12 text-center rounded-full object-cover bg-info text-base ring-2 ring-white dark:ring-white-dark relative transition-all duration-300 hover:hover:translate-y-2">AG</span>
</div>
Animate X-axis
Code
AG
<!-- animate x axis -->
<div class="flex items-center justify-center -space-x-4 rtl:space-x-reverse text-white">
<img class="w-12 h-12 rounded-full object-cover ring-2 ring-white dark:ring-white-dark relative transition-all duration-300 hover:translate-x-2" src="/assets/images/profile-12.jpeg" alt="image" />
<img class="w-12 h-12 rounded-full object-cover ring-2 ring-white dark:ring-white-dark relative transition-all duration-300 hover:translate-x-2" src="/assets/images/profile-12.jpeg" alt="image" />
<img class="w-12 h-12 rounded-full object-cover ring-2 ring-white dark:ring-white-dark relative transition-all duration-300 hover:translate-x-2" src="/assets/images/profile-12.jpeg" alt="image" />
<span class="flex justify-center items-center w-12 h-12 text-center rounded-full object-cover bg-info text-base ring-2 ring-white dark:ring-white-dark relative transition-all duration-300 hover:translate-x-2">AG</span>
</div>
Tooltip
Code
AG
<!-- tooltip -->
<div class="flex items-center justify-center -space-x-4 rtl:space-x-reverse text-white">
<span x-tooltip="Judy Holmes"><img class="w-12 h-12 rounded-full object-cover ring-2 ring-white dark:ring-white-dark" src="/assets/images/profile-12.jpeg" alt="image" /></span>
<span x-tooltip="Judy Holmes"><img class="w-12 h-12 rounded-full object-cover ring-2 ring-white dark:ring-white-dark" src="/assets/images/profile-12.jpeg" alt="image" /></span>
<span x-tooltip="Judy Holmes"><img class="w-12 h-12 rounded-full object-cover ring-2 ring-white dark:ring-white-dark" src="/assets/images/profile-12.jpeg" alt="image" /></span>
<span x-tooltip="Alan Green"><span class="flex justify-center items-center w-12 h-12 text-center rounded-full object-cover bg-info text-base ring-2 ring-white dark:ring-white-dark">AG</span></span>
</div>
© . Vristo All rights reserved.