- عناصر
- آواتار
ساده
نمونه کد
<!-- 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" />
شاخص ها
نمونه کد
<!-- 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>
شکل ها
نمونه کد
<!-- 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" />
اولیه
نمونه کد
مک
مک
مک
مک
<!-- 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>
گروه
نمونه کد
مک
مک
<!-- 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 -->
<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 -->
<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 -->
<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>
© روشاک