Avatars
Ready to use Tailwind CSS avatar components with production-ready, copy-paste HTML code. Use them as they are, or as a starting point to build beautiful websites.
Avatars are one of those tiny UI details that you need everywhere, user menus, comment threads, team lists, notification items. We have a range here: circular shapes in multiple sizes, avatars with a status indicator dot, ones with a verified tick, stacked avatar groups, and placeholder initials for when there's no photo. They're all simple HTML and Tailwind, nothing fancy. Combine them with other components as needed.
Tailwind
<!-- avatars-base -->
<div class="flex items-center -space-x-3.5">
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1587397845856-e6cf49176c70?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>
<!-- avatars-sm -->
<div class="flex items-center -space-x-3">
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1587397845856-e6cf49176c70?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>
<!-- avatars-xs -->
<div class="flex items-center -space-x-1.5">
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1587397845856-e6cf49176c70?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div><!-- avatars-2xl -->
<span class="relative inline-block rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-16 w-16 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<!-- avatars-xl -->
<span class="relative inline-block rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-14 w-14 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-14 w-14 rounded-full object-cover" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<!-- avatars-lg -->
<span class="relative inline-block rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-12 w-12 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-12 w-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<!-- avatars-base -->
<span class="relative inline-block rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<!-- avatars-sm -->
<span class="relative inline-block rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<!-- avatars-xs -->
<span class="relative inline-block rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span><!-- avatars-2xl -->
<span class="relative inline-block rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-16 w-16 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
<span aria-hidden="true" class="absolute bottom-0 right-0 h-4 w-4 rounded-full bg-green-400 ring-2 ring-white"></span>
</span>
<!-- avatars-xl -->
<span class="relative inline-block rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-14 w-14 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-14 w-14 rounded-full object-cover" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
<span aria-hidden="true" class="absolute bottom-0 right-0 h-3.5 w-3.5 rounded-full bg-green-400 ring-2 ring-white"></span>
</span>
<!-- avatars-lg -->
<span class="relative inline-block rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-12 w-12 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-12 w-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
<span aria-hidden="true" class="absolute bottom-0 right-0 h-3 w-3 rounded-full bg-green-400 ring-2 ring-white"></span>
</span>
<!-- avatars-base -->
<span class="relative inline-block rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
<span aria-hidden="true" class="absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full bg-green-400 ring-2 ring-white"></span>
</span>
<!-- avatars-sm -->
<span class="relative inline-block rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
<span aria-hidden="true" class="absolute bottom-0 right-0 h-2 w-2 rounded-full bg-green-400 ring-2 ring-white"></span>
</span>
<!-- avatars-xs -->
<span class="relative inline-block rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
<span aria-hidden="true" class="absolute bottom-0 right-0 h-1.5 w-1.5 rounded-full bg-green-400 ring-2 ring-white"></span>
</span><!-- avatars-2xl -->
<span class="relative inline-block rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-16 w-16 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
<svg class="absolute bottom-0 right-0 h-5 w-5 text-sky-500" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M81 49.5C81 66.897 66.897 81 49.5 81C32.103 81 18 66.897 18 49.5C18 32.103 32.103 18 49.5 18C66.897 18 81 32.103 81 49.5Z" fill="white" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M37.962 6.00136C36.7444 7.03901 36.1356 7.55791 35.4853 7.99371C33.9948 8.99271 32.3209 9.68606 30.5605 10.0336C29.7926 10.1853 28.9952 10.2489 27.4004 10.3761C23.3935 10.6959 21.39 10.8558 19.7186 11.4462C15.8526 12.8117 12.8117 15.8526 11.4462 19.7186C10.8558 21.39 10.6959 23.3935 10.3761 27.4004C10.2489 28.9952 10.1853 29.7926 10.0336 30.5605C9.68606 32.3209 8.99271 33.9948 7.99371 35.4853C7.55791 36.1356 7.03906 36.7444 6.00136 37.962C3.39416 41.0215 2.09051 42.551 1.32611 44.1505C-0.442038 47.85 -0.442038 52.15 1.32611 55.8495C2.09056 57.449 3.39416 58.9785 6.00136 62.038C7.03891 63.2555 7.55791 63.8645 7.99371 64.5145C8.99271 66.005 9.68606 67.679 10.0336 69.4395C10.1853 70.2075 10.2489 71.005 10.3761 72.5995C10.6959 76.6065 10.8558 78.61 11.4462 80.2815C12.8117 84.1475 15.8526 87.1885 19.7186 88.554C21.39 89.144 23.3935 89.304 27.4004 89.624C28.9952 89.751 29.7926 89.815 30.5605 89.9665C32.3209 90.314 33.9948 91.0075 35.4853 92.0065C36.1356 92.442 36.7444 92.961 37.962 93.9985C41.0215 96.606 42.551 97.9095 44.1505 98.674C47.85 100.442 52.15 100.442 55.8495 98.674C57.449 97.9095 58.9785 96.606 62.038 93.9985C63.2555 92.961 63.8645 92.442 64.5145 92.0065C66.005 91.0075 67.679 90.314 69.4395 89.9665C70.2075 89.815 71.005 89.751 72.5995 89.624C76.6065 89.304 78.61 89.144 80.2815 88.554C84.1475 87.1885 87.1885 84.1475 88.554 80.2815C89.144 78.61 89.304 76.6065 89.624 72.5995C89.751 71.005 89.815 70.2075 89.9665 69.4395C90.314 67.679 91.0075 66.005 92.0065 64.5145C92.442 63.8645 92.961 63.2555 93.9985 62.038C96.606 58.9785 97.9095 57.449 98.674 55.8495C100.442 52.15 100.442 47.85 98.674 44.1505C97.9095 42.551 96.606 41.0215 93.9985 37.962C92.961 36.7444 92.442 36.1356 92.0065 35.4853C91.0075 33.9948 90.314 32.3209 89.9665 30.5605C89.815 29.7926 89.751 28.9952 89.624 27.4004C89.304 23.3935 89.144 21.39 88.554 19.7186C87.1885 15.8526 84.1475 12.8117 80.2815 11.4462C78.61 10.8558 76.6065 10.6959 72.5995 10.3761C71.005 10.2489 70.2075 10.1853 69.4395 10.0336C67.679 9.68606 66.005 8.99271 64.5145 7.99371C63.8645 7.55791 63.2555 7.03906 62.038 6.00136C58.9785 3.39416 57.449 2.09056 55.8495 1.32611C52.15 -0.442038 47.85 -0.442038 44.1505 1.32611C42.551 2.09051 41.0215 3.39416 37.962 6.00136ZM71.8675 39.3157C73.4565 37.7265 73.4565 35.15 71.8675 33.5608C70.2785 31.9717 67.7015 31.9717 66.1125 33.5608L41.8615 57.812L33.8873 49.838C32.2982 48.249 29.7216 48.249 28.1325 49.838C26.5433 51.427 26.5433 54.0035 28.1325 55.593L38.9839 66.4445C40.573 68.0335 43.1495 68.0335 44.739 66.4445L71.8675 39.3157Z" fill="currentColor" />
</svg>
</span>
<!-- avatars-xl -->
<span class="relative inline-block rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-14 w-14 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-14 w-14 rounded-full object-cover" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
<svg class="absolute bottom-0 right-0 h-[1.125rem] w-[1.125rem] text-sky-500" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M81 49.5C81 66.897 66.897 81 49.5 81C32.103 81 18 66.897 18 49.5C18 32.103 32.103 18 49.5 18C66.897 18 81 32.103 81 49.5Z" fill="white" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M37.962 6.00136C36.7444 7.03901 36.1356 7.55791 35.4853 7.99371C33.9948 8.99271 32.3209 9.68606 30.5605 10.0336C29.7926 10.1853 28.9952 10.2489 27.4004 10.3761C23.3935 10.6959 21.39 10.8558 19.7186 11.4462C15.8526 12.8117 12.8117 15.8526 11.4462 19.7186C10.8558 21.39 10.6959 23.3935 10.3761 27.4004C10.2489 28.9952 10.1853 29.7926 10.0336 30.5605C9.68606 32.3209 8.99271 33.9948 7.99371 35.4853C7.55791 36.1356 7.03906 36.7444 6.00136 37.962C3.39416 41.0215 2.09051 42.551 1.32611 44.1505C-0.442038 47.85 -0.442038 52.15 1.32611 55.8495C2.09056 57.449 3.39416 58.9785 6.00136 62.038C7.03891 63.2555 7.55791 63.8645 7.99371 64.5145C8.99271 66.005 9.68606 67.679 10.0336 69.4395C10.1853 70.2075 10.2489 71.005 10.3761 72.5995C10.6959 76.6065 10.8558 78.61 11.4462 80.2815C12.8117 84.1475 15.8526 87.1885 19.7186 88.554C21.39 89.144 23.3935 89.304 27.4004 89.624C28.9952 89.751 29.7926 89.815 30.5605 89.9665C32.3209 90.314 33.9948 91.0075 35.4853 92.0065C36.1356 92.442 36.7444 92.961 37.962 93.9985C41.0215 96.606 42.551 97.9095 44.1505 98.674C47.85 100.442 52.15 100.442 55.8495 98.674C57.449 97.9095 58.9785 96.606 62.038 93.9985C63.2555 92.961 63.8645 92.442 64.5145 92.0065C66.005 91.0075 67.679 90.314 69.4395 89.9665C70.2075 89.815 71.005 89.751 72.5995 89.624C76.6065 89.304 78.61 89.144 80.2815 88.554C84.1475 87.1885 87.1885 84.1475 88.554 80.2815C89.144 78.61 89.304 76.6065 89.624 72.5995C89.751 71.005 89.815 70.2075 89.9665 69.4395C90.314 67.679 91.0075 66.005 92.0065 64.5145C92.442 63.8645 92.961 63.2555 93.9985 62.038C96.606 58.9785 97.9095 57.449 98.674 55.8495C100.442 52.15 100.442 47.85 98.674 44.1505C97.9095 42.551 96.606 41.0215 93.9985 37.962C92.961 36.7444 92.442 36.1356 92.0065 35.4853C91.0075 33.9948 90.314 32.3209 89.9665 30.5605C89.815 29.7926 89.751 28.9952 89.624 27.4004C89.304 23.3935 89.144 21.39 88.554 19.7186C87.1885 15.8526 84.1475 12.8117 80.2815 11.4462C78.61 10.8558 76.6065 10.6959 72.5995 10.3761C71.005 10.2489 70.2075 10.1853 69.4395 10.0336C67.679 9.68606 66.005 8.99271 64.5145 7.99371C63.8645 7.55791 63.2555 7.03906 62.038 6.00136C58.9785 3.39416 57.449 2.09056 55.8495 1.32611C52.15 -0.442038 47.85 -0.442038 44.1505 1.32611C42.551 2.09051 41.0215 3.39416 37.962 6.00136ZM71.8675 39.3157C73.4565 37.7265 73.4565 35.15 71.8675 33.5608C70.2785 31.9717 67.7015 31.9717 66.1125 33.5608L41.8615 57.812L33.8873 49.838C32.2982 48.249 29.7216 48.249 28.1325 49.838C26.5433 51.427 26.5433 54.0035 28.1325 55.593L38.9839 66.4445C40.573 68.0335 43.1495 68.0335 44.739 66.4445L71.8675 39.3157Z" fill="currentColor" />
</svg>
</span>
<!-- avatars-lg -->
<span class="relative inline-block rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-12 w-12 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-12 w-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
<svg class="absolute bottom-0 right-0 h-4 w-4 text-sky-500" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M81 49.5C81 66.897 66.897 81 49.5 81C32.103 81 18 66.897 18 49.5C18 32.103 32.103 18 49.5 18C66.897 18 81 32.103 81 49.5Z" fill="white" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M37.962 6.00136C36.7444 7.03901 36.1356 7.55791 35.4853 7.99371C33.9948 8.99271 32.3209 9.68606 30.5605 10.0336C29.7926 10.1853 28.9952 10.2489 27.4004 10.3761C23.3935 10.6959 21.39 10.8558 19.7186 11.4462C15.8526 12.8117 12.8117 15.8526 11.4462 19.7186C10.8558 21.39 10.6959 23.3935 10.3761 27.4004C10.2489 28.9952 10.1853 29.7926 10.0336 30.5605C9.68606 32.3209 8.99271 33.9948 7.99371 35.4853C7.55791 36.1356 7.03906 36.7444 6.00136 37.962C3.39416 41.0215 2.09051 42.551 1.32611 44.1505C-0.442038 47.85 -0.442038 52.15 1.32611 55.8495C2.09056 57.449 3.39416 58.9785 6.00136 62.038C7.03891 63.2555 7.55791 63.8645 7.99371 64.5145C8.99271 66.005 9.68606 67.679 10.0336 69.4395C10.1853 70.2075 10.2489 71.005 10.3761 72.5995C10.6959 76.6065 10.8558 78.61 11.4462 80.2815C12.8117 84.1475 15.8526 87.1885 19.7186 88.554C21.39 89.144 23.3935 89.304 27.4004 89.624C28.9952 89.751 29.7926 89.815 30.5605 89.9665C32.3209 90.314 33.9948 91.0075 35.4853 92.0065C36.1356 92.442 36.7444 92.961 37.962 93.9985C41.0215 96.606 42.551 97.9095 44.1505 98.674C47.85 100.442 52.15 100.442 55.8495 98.674C57.449 97.9095 58.9785 96.606 62.038 93.9985C63.2555 92.961 63.8645 92.442 64.5145 92.0065C66.005 91.0075 67.679 90.314 69.4395 89.9665C70.2075 89.815 71.005 89.751 72.5995 89.624C76.6065 89.304 78.61 89.144 80.2815 88.554C84.1475 87.1885 87.1885 84.1475 88.554 80.2815C89.144 78.61 89.304 76.6065 89.624 72.5995C89.751 71.005 89.815 70.2075 89.9665 69.4395C90.314 67.679 91.0075 66.005 92.0065 64.5145C92.442 63.8645 92.961 63.2555 93.9985 62.038C96.606 58.9785 97.9095 57.449 98.674 55.8495C100.442 52.15 100.442 47.85 98.674 44.1505C97.9095 42.551 96.606 41.0215 93.9985 37.962C92.961 36.7444 92.442 36.1356 92.0065 35.4853C91.0075 33.9948 90.314 32.3209 89.9665 30.5605C89.815 29.7926 89.751 28.9952 89.624 27.4004C89.304 23.3935 89.144 21.39 88.554 19.7186C87.1885 15.8526 84.1475 12.8117 80.2815 11.4462C78.61 10.8558 76.6065 10.6959 72.5995 10.3761C71.005 10.2489 70.2075 10.1853 69.4395 10.0336C67.679 9.68606 66.005 8.99271 64.5145 7.99371C63.8645 7.55791 63.2555 7.03906 62.038 6.00136C58.9785 3.39416 57.449 2.09056 55.8495 1.32611C52.15 -0.442038 47.85 -0.442038 44.1505 1.32611C42.551 2.09051 41.0215 3.39416 37.962 6.00136ZM71.8675 39.3157C73.4565 37.7265 73.4565 35.15 71.8675 33.5608C70.2785 31.9717 67.7015 31.9717 66.1125 33.5608L41.8615 57.812L33.8873 49.838C32.2982 48.249 29.7216 48.249 28.1325 49.838C26.5433 51.427 26.5433 54.0035 28.1325 55.593L38.9839 66.4445C40.573 68.0335 43.1495 68.0335 44.739 66.4445L71.8675 39.3157Z" fill="currentColor" />
</svg>
</span>
<!-- avatars-base -->
<span class="relative inline-block rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
<svg class="absolute bottom-0 right-0 h-3.5 w-3.5 text-sky-500" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M81 49.5C81 66.897 66.897 81 49.5 81C32.103 81 18 66.897 18 49.5C18 32.103 32.103 18 49.5 18C66.897 18 81 32.103 81 49.5Z" fill="white" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M37.962 6.00136C36.7444 7.03901 36.1356 7.55791 35.4853 7.99371C33.9948 8.99271 32.3209 9.68606 30.5605 10.0336C29.7926 10.1853 28.9952 10.2489 27.4004 10.3761C23.3935 10.6959 21.39 10.8558 19.7186 11.4462C15.8526 12.8117 12.8117 15.8526 11.4462 19.7186C10.8558 21.39 10.6959 23.3935 10.3761 27.4004C10.2489 28.9952 10.1853 29.7926 10.0336 30.5605C9.68606 32.3209 8.99271 33.9948 7.99371 35.4853C7.55791 36.1356 7.03906 36.7444 6.00136 37.962C3.39416 41.0215 2.09051 42.551 1.32611 44.1505C-0.442038 47.85 -0.442038 52.15 1.32611 55.8495C2.09056 57.449 3.39416 58.9785 6.00136 62.038C7.03891 63.2555 7.55791 63.8645 7.99371 64.5145C8.99271 66.005 9.68606 67.679 10.0336 69.4395C10.1853 70.2075 10.2489 71.005 10.3761 72.5995C10.6959 76.6065 10.8558 78.61 11.4462 80.2815C12.8117 84.1475 15.8526 87.1885 19.7186 88.554C21.39 89.144 23.3935 89.304 27.4004 89.624C28.9952 89.751 29.7926 89.815 30.5605 89.9665C32.3209 90.314 33.9948 91.0075 35.4853 92.0065C36.1356 92.442 36.7444 92.961 37.962 93.9985C41.0215 96.606 42.551 97.9095 44.1505 98.674C47.85 100.442 52.15 100.442 55.8495 98.674C57.449 97.9095 58.9785 96.606 62.038 93.9985C63.2555 92.961 63.8645 92.442 64.5145 92.0065C66.005 91.0075 67.679 90.314 69.4395 89.9665C70.2075 89.815 71.005 89.751 72.5995 89.624C76.6065 89.304 78.61 89.144 80.2815 88.554C84.1475 87.1885 87.1885 84.1475 88.554 80.2815C89.144 78.61 89.304 76.6065 89.624 72.5995C89.751 71.005 89.815 70.2075 89.9665 69.4395C90.314 67.679 91.0075 66.005 92.0065 64.5145C92.442 63.8645 92.961 63.2555 93.9985 62.038C96.606 58.9785 97.9095 57.449 98.674 55.8495C100.442 52.15 100.442 47.85 98.674 44.1505C97.9095 42.551 96.606 41.0215 93.9985 37.962C92.961 36.7444 92.442 36.1356 92.0065 35.4853C91.0075 33.9948 90.314 32.3209 89.9665 30.5605C89.815 29.7926 89.751 28.9952 89.624 27.4004C89.304 23.3935 89.144 21.39 88.554 19.7186C87.1885 15.8526 84.1475 12.8117 80.2815 11.4462C78.61 10.8558 76.6065 10.6959 72.5995 10.3761C71.005 10.2489 70.2075 10.1853 69.4395 10.0336C67.679 9.68606 66.005 8.99271 64.5145 7.99371C63.8645 7.55791 63.2555 7.03906 62.038 6.00136C58.9785 3.39416 57.449 2.09056 55.8495 1.32611C52.15 -0.442038 47.85 -0.442038 44.1505 1.32611C42.551 2.09051 41.0215 3.39416 37.962 6.00136ZM71.8675 39.3157C73.4565 37.7265 73.4565 35.15 71.8675 33.5608C70.2785 31.9717 67.7015 31.9717 66.1125 33.5608L41.8615 57.812L33.8873 49.838C32.2982 48.249 29.7216 48.249 28.1325 49.838C26.5433 51.427 26.5433 54.0035 28.1325 55.593L38.9839 66.4445C40.573 68.0335 43.1495 68.0335 44.739 66.4445L71.8675 39.3157Z" fill="currentColor" />
</svg>
</span>
<!-- avatars-sm -->
<span class="relative inline-block rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
<svg class="absolute bottom-0 right-0 h-3 w-3 text-sky-500" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M81 49.5C81 66.897 66.897 81 49.5 81C32.103 81 18 66.897 18 49.5C18 32.103 32.103 18 49.5 18C66.897 18 81 32.103 81 49.5Z" fill="white" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M37.962 6.00136C36.7444 7.03901 36.1356 7.55791 35.4853 7.99371C33.9948 8.99271 32.3209 9.68606 30.5605 10.0336C29.7926 10.1853 28.9952 10.2489 27.4004 10.3761C23.3935 10.6959 21.39 10.8558 19.7186 11.4462C15.8526 12.8117 12.8117 15.8526 11.4462 19.7186C10.8558 21.39 10.6959 23.3935 10.3761 27.4004C10.2489 28.9952 10.1853 29.7926 10.0336 30.5605C9.68606 32.3209 8.99271 33.9948 7.99371 35.4853C7.55791 36.1356 7.03906 36.7444 6.00136 37.962C3.39416 41.0215 2.09051 42.551 1.32611 44.1505C-0.442038 47.85 -0.442038 52.15 1.32611 55.8495C2.09056 57.449 3.39416 58.9785 6.00136 62.038C7.03891 63.2555 7.55791 63.8645 7.99371 64.5145C8.99271 66.005 9.68606 67.679 10.0336 69.4395C10.1853 70.2075 10.2489 71.005 10.3761 72.5995C10.6959 76.6065 10.8558 78.61 11.4462 80.2815C12.8117 84.1475 15.8526 87.1885 19.7186 88.554C21.39 89.144 23.3935 89.304 27.4004 89.624C28.9952 89.751 29.7926 89.815 30.5605 89.9665C32.3209 90.314 33.9948 91.0075 35.4853 92.0065C36.1356 92.442 36.7444 92.961 37.962 93.9985C41.0215 96.606 42.551 97.9095 44.1505 98.674C47.85 100.442 52.15 100.442 55.8495 98.674C57.449 97.9095 58.9785 96.606 62.038 93.9985C63.2555 92.961 63.8645 92.442 64.5145 92.0065C66.005 91.0075 67.679 90.314 69.4395 89.9665C70.2075 89.815 71.005 89.751 72.5995 89.624C76.6065 89.304 78.61 89.144 80.2815 88.554C84.1475 87.1885 87.1885 84.1475 88.554 80.2815C89.144 78.61 89.304 76.6065 89.624 72.5995C89.751 71.005 89.815 70.2075 89.9665 69.4395C90.314 67.679 91.0075 66.005 92.0065 64.5145C92.442 63.8645 92.961 63.2555 93.9985 62.038C96.606 58.9785 97.9095 57.449 98.674 55.8495C100.442 52.15 100.442 47.85 98.674 44.1505C97.9095 42.551 96.606 41.0215 93.9985 37.962C92.961 36.7444 92.442 36.1356 92.0065 35.4853C91.0075 33.9948 90.314 32.3209 89.9665 30.5605C89.815 29.7926 89.751 28.9952 89.624 27.4004C89.304 23.3935 89.144 21.39 88.554 19.7186C87.1885 15.8526 84.1475 12.8117 80.2815 11.4462C78.61 10.8558 76.6065 10.6959 72.5995 10.3761C71.005 10.2489 70.2075 10.1853 69.4395 10.0336C67.679 9.68606 66.005 8.99271 64.5145 7.99371C63.8645 7.55791 63.2555 7.03906 62.038 6.00136C58.9785 3.39416 57.449 2.09056 55.8495 1.32611C52.15 -0.442038 47.85 -0.442038 44.1505 1.32611C42.551 2.09051 41.0215 3.39416 37.962 6.00136ZM71.8675 39.3157C73.4565 37.7265 73.4565 35.15 71.8675 33.5608C70.2785 31.9717 67.7015 31.9717 66.1125 33.5608L41.8615 57.812L33.8873 49.838C32.2982 48.249 29.7216 48.249 28.1325 49.838C26.5433 51.427 26.5433 54.0035 28.1325 55.593L38.9839 66.4445C40.573 68.0335 43.1495 68.0335 44.739 66.4445L71.8675 39.3157Z" fill="currentColor" />
</svg>
</span>
<!-- avatars-xs -->
<span class="relative inline-block rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
<svg class="absolute bottom-0 right-0 h-2.5 w-2.5 text-sky-500" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M81 49.5C81 66.897 66.897 81 49.5 81C32.103 81 18 66.897 18 49.5C18 32.103 32.103 18 49.5 18C66.897 18 81 32.103 81 49.5Z" fill="white" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M37.962 6.00136C36.7444 7.03901 36.1356 7.55791 35.4853 7.99371C33.9948 8.99271 32.3209 9.68606 30.5605 10.0336C29.7926 10.1853 28.9952 10.2489 27.4004 10.3761C23.3935 10.6959 21.39 10.8558 19.7186 11.4462C15.8526 12.8117 12.8117 15.8526 11.4462 19.7186C10.8558 21.39 10.6959 23.3935 10.3761 27.4004C10.2489 28.9952 10.1853 29.7926 10.0336 30.5605C9.68606 32.3209 8.99271 33.9948 7.99371 35.4853C7.55791 36.1356 7.03906 36.7444 6.00136 37.962C3.39416 41.0215 2.09051 42.551 1.32611 44.1505C-0.442038 47.85 -0.442038 52.15 1.32611 55.8495C2.09056 57.449 3.39416 58.9785 6.00136 62.038C7.03891 63.2555 7.55791 63.8645 7.99371 64.5145C8.99271 66.005 9.68606 67.679 10.0336 69.4395C10.1853 70.2075 10.2489 71.005 10.3761 72.5995C10.6959 76.6065 10.8558 78.61 11.4462 80.2815C12.8117 84.1475 15.8526 87.1885 19.7186 88.554C21.39 89.144 23.3935 89.304 27.4004 89.624C28.9952 89.751 29.7926 89.815 30.5605 89.9665C32.3209 90.314 33.9948 91.0075 35.4853 92.0065C36.1356 92.442 36.7444 92.961 37.962 93.9985C41.0215 96.606 42.551 97.9095 44.1505 98.674C47.85 100.442 52.15 100.442 55.8495 98.674C57.449 97.9095 58.9785 96.606 62.038 93.9985C63.2555 92.961 63.8645 92.442 64.5145 92.0065C66.005 91.0075 67.679 90.314 69.4395 89.9665C70.2075 89.815 71.005 89.751 72.5995 89.624C76.6065 89.304 78.61 89.144 80.2815 88.554C84.1475 87.1885 87.1885 84.1475 88.554 80.2815C89.144 78.61 89.304 76.6065 89.624 72.5995C89.751 71.005 89.815 70.2075 89.9665 69.4395C90.314 67.679 91.0075 66.005 92.0065 64.5145C92.442 63.8645 92.961 63.2555 93.9985 62.038C96.606 58.9785 97.9095 57.449 98.674 55.8495C100.442 52.15 100.442 47.85 98.674 44.1505C97.9095 42.551 96.606 41.0215 93.9985 37.962C92.961 36.7444 92.442 36.1356 92.0065 35.4853C91.0075 33.9948 90.314 32.3209 89.9665 30.5605C89.815 29.7926 89.751 28.9952 89.624 27.4004C89.304 23.3935 89.144 21.39 88.554 19.7186C87.1885 15.8526 84.1475 12.8117 80.2815 11.4462C78.61 10.8558 76.6065 10.6959 72.5995 10.3761C71.005 10.2489 70.2075 10.1853 69.4395 10.0336C67.679 9.68606 66.005 8.99271 64.5145 7.99371C63.8645 7.55791 63.2555 7.03906 62.038 6.00136C58.9785 3.39416 57.449 2.09056 55.8495 1.32611C52.15 -0.442038 47.85 -0.442038 44.1505 1.32611C42.551 2.09051 41.0215 3.39416 37.962 6.00136ZM71.8675 39.3157C73.4565 37.7265 73.4565 35.15 71.8675 33.5608C70.2785 31.9717 67.7015 31.9717 66.1125 33.5608L41.8615 57.812L33.8873 49.838C32.2982 48.249 29.7216 48.249 28.1325 49.838C26.5433 51.427 26.5433 54.0035 28.1325 55.593L38.9839 66.4445C40.573 68.0335 43.1495 68.0335 44.739 66.4445L71.8675 39.3157Z" fill="currentColor" />
</svg>
</span><!-- avatars-2xl -->
<span class="relative inline-block rounded-full bg-gray-100">
<span aria-hidden="true" class="absolute inset-0 h-16 w-16 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<svg class="h-16 w-16 rounded-full text-gray-300" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M90 100C90 94.7471 88.9654 89.5457 86.9552 84.6927C84.945 79.8396 81.9986 75.4301 78.2843 71.7157C74.5699 68.0014 70.1604 65.055 65.3073 63.0448C60.4543 61.0346 55.2529 60 50 60C44.7471 60 39.5457 61.0346 34.6927 63.0448C29.8396 65.055 25.4301 68.0014 21.7157 71.7157C18.0014 75.4301 15.055 79.8396 13.0448 84.6927C11.0346 89.5457 10 94.7471 10 100L90 100Z" fill="currentColor" />
<circle cx="50" cy="32" r="18" fill="currentColor" />
</svg>
</span>
<!-- avatars-xl -->
<span class="relative inline-block rounded-full bg-gray-100">
<span aria-hidden="true" class="absolute inset-0 h-14 w-14 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<svg class="h-14 w-14 rounded-full text-gray-300" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M90 100C90 94.7471 88.9654 89.5457 86.9552 84.6927C84.945 79.8396 81.9986 75.4301 78.2843 71.7157C74.5699 68.0014 70.1604 65.055 65.3073 63.0448C60.4543 61.0346 55.2529 60 50 60C44.7471 60 39.5457 61.0346 34.6927 63.0448C29.8396 65.055 25.4301 68.0014 21.7157 71.7157C18.0014 75.4301 15.055 79.8396 13.0448 84.6927C11.0346 89.5457 10 94.7471 10 100L90 100Z" fill="currentColor" />
<circle cx="50" cy="32" r="18" fill="currentColor" />
</svg>
</span>
<!-- avatars-lg -->
<span class="relative inline-block rounded-full bg-gray-100">
<span aria-hidden="true" class="absolute inset-0 h-12 w-12 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<svg class="h-12 w-12 rounded-full text-gray-300" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M90 100C90 94.7471 88.9654 89.5457 86.9552 84.6927C84.945 79.8396 81.9986 75.4301 78.2843 71.7157C74.5699 68.0014 70.1604 65.055 65.3073 63.0448C60.4543 61.0346 55.2529 60 50 60C44.7471 60 39.5457 61.0346 34.6927 63.0448C29.8396 65.055 25.4301 68.0014 21.7157 71.7157C18.0014 75.4301 15.055 79.8396 13.0448 84.6927C11.0346 89.5457 10 94.7471 10 100L90 100Z" fill="currentColor" />
<circle cx="50" cy="32" r="18" fill="currentColor" />
</svg>
</span>
<!-- avatars-base -->
<span class="relative inline-block rounded-full bg-gray-100">
<span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<svg class="h-10 w-10 rounded-full text-gray-300" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M90 100C90 94.7471 88.9654 89.5457 86.9552 84.6927C84.945 79.8396 81.9986 75.4301 78.2843 71.7157C74.5699 68.0014 70.1604 65.055 65.3073 63.0448C60.4543 61.0346 55.2529 60 50 60C44.7471 60 39.5457 61.0346 34.6927 63.0448C29.8396 65.055 25.4301 68.0014 21.7157 71.7157C18.0014 75.4301 15.055 79.8396 13.0448 84.6927C11.0346 89.5457 10 94.7471 10 100L90 100Z" fill="currentColor" />
<circle cx="50" cy="32" r="18" fill="currentColor" />
</svg>
</span>
<!-- avatars-sm -->
<span class="relative inline-block rounded-full bg-gray-100">
<span aria-hidden="true" class="absolute inset-0 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<svg class="h-8 w-8 rounded-full text-gray-300" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M90 100C90 94.7471 88.9654 89.5457 86.9552 84.6927C84.945 79.8396 81.9986 75.4301 78.2843 71.7157C74.5699 68.0014 70.1604 65.055 65.3073 63.0448C60.4543 61.0346 55.2529 60 50 60C44.7471 60 39.5457 61.0346 34.6927 63.0448C29.8396 65.055 25.4301 68.0014 21.7157 71.7157C18.0014 75.4301 15.055 79.8396 13.0448 84.6927C11.0346 89.5457 10 94.7471 10 100L90 100Z" fill="currentColor" />
<circle cx="50" cy="32" r="18" fill="currentColor" />
</svg>
</span>
<!-- avatars-xs -->
<span class="relative inline-block rounded-full bg-gray-100">
<span aria-hidden="true" class="absolute inset-0 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<svg class="h-6 w-6 rounded-full text-gray-300" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M90 100C90 94.7471 88.9654 89.5457 86.9552 84.6927C84.945 79.8396 81.9986 75.4301 78.2843 71.7157C74.5699 68.0014 70.1604 65.055 65.3073 63.0448C60.4543 61.0346 55.2529 60 50 60C44.7471 60 39.5457 61.0346 34.6927 63.0448C29.8396 65.055 25.4301 68.0014 21.7157 71.7157C18.0014 75.4301 15.055 79.8396 13.0448 84.6927C11.0346 89.5457 10 94.7471 10 100L90 100Z" fill="currentColor" />
<circle cx="50" cy="32" r="18" fill="currentColor" />
</svg>
</span><!-- avatars-2xl -->
<span class="relative inline-block rounded-full bg-gray-100">
<span aria-hidden="true" class="absolute inset-0 h-16 w-16 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<svg class="h-16 w-16 rounded-full text-gray-300" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M90 100C90 94.7471 88.9654 89.5457 86.9552 84.6927C84.945 79.8396 81.9986 75.4301 78.2843 71.7157C74.5699 68.0014 70.1604 65.055 65.3073 63.0448C60.4543 61.0346 55.2529 60 50 60C44.7471 60 39.5457 61.0346 34.6927 63.0448C29.8396 65.055 25.4301 68.0014 21.7157 71.7157C18.0014 75.4301 15.055 79.8396 13.0448 84.6927C11.0346 89.5457 10 94.7471 10 100L90 100Z" fill="currentColor" />
<circle cx="50" cy="32" r="18" fill="currentColor" />
</svg>
<span aria-hidden="true" class="absolute bottom-0 right-0 h-4 w-4 rounded-full bg-green-400 ring-2 ring-white"></span>
</span>
<!-- avatars-xl -->
<span class="relative inline-block rounded-full bg-gray-100">
<span aria-hidden="true" class="absolute inset-0 h-14 w-14 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<svg class="h-14 w-14 rounded-full text-gray-300" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M90 100C90 94.7471 88.9654 89.5457 86.9552 84.6927C84.945 79.8396 81.9986 75.4301 78.2843 71.7157C74.5699 68.0014 70.1604 65.055 65.3073 63.0448C60.4543 61.0346 55.2529 60 50 60C44.7471 60 39.5457 61.0346 34.6927 63.0448C29.8396 65.055 25.4301 68.0014 21.7157 71.7157C18.0014 75.4301 15.055 79.8396 13.0448 84.6927C11.0346 89.5457 10 94.7471 10 100L90 100Z" fill="currentColor" />
<circle cx="50" cy="32" r="18" fill="currentColor" />
</svg>
<span aria-hidden="true" class="absolute bottom-0 right-0 h-3.5 w-3.5 rounded-full bg-green-400 ring-2 ring-white"></span>
</span>
<!-- avatars-lg -->
<span class="relative inline-block rounded-full bg-gray-100">
<span aria-hidden="true" class="absolute inset-0 h-12 w-12 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<svg class="h-12 w-12 rounded-full text-gray-300" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M90 100C90 94.7471 88.9654 89.5457 86.9552 84.6927C84.945 79.8396 81.9986 75.4301 78.2843 71.7157C74.5699 68.0014 70.1604 65.055 65.3073 63.0448C60.4543 61.0346 55.2529 60 50 60C44.7471 60 39.5457 61.0346 34.6927 63.0448C29.8396 65.055 25.4301 68.0014 21.7157 71.7157C18.0014 75.4301 15.055 79.8396 13.0448 84.6927C11.0346 89.5457 10 94.7471 10 100L90 100Z" fill="currentColor" />
<circle cx="50" cy="32" r="18" fill="currentColor" />
</svg>
<span aria-hidden="true" class="absolute bottom-0 right-0 h-3 w-3 rounded-full bg-green-400 ring-2 ring-white"></span>
</span>
<!-- avatars-base -->
<span class="relative inline-block rounded-full bg-gray-100">
<span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<svg class="h-10 w-10 rounded-full text-gray-300" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M90 100C90 94.7471 88.9654 89.5457 86.9552 84.6927C84.945 79.8396 81.9986 75.4301 78.2843 71.7157C74.5699 68.0014 70.1604 65.055 65.3073 63.0448C60.4543 61.0346 55.2529 60 50 60C44.7471 60 39.5457 61.0346 34.6927 63.0448C29.8396 65.055 25.4301 68.0014 21.7157 71.7157C18.0014 75.4301 15.055 79.8396 13.0448 84.6927C11.0346 89.5457 10 94.7471 10 100L90 100Z" fill="currentColor" />
<circle cx="50" cy="32" r="18" fill="currentColor" />
</svg>
<span aria-hidden="true" class="absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full bg-green-400 ring-2 ring-white"></span>
</span>
<!-- avatars-sm -->
<span class="relative inline-block rounded-full bg-gray-100">
<span aria-hidden="true" class="absolute inset-0 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<svg class="h-8 w-8 rounded-full text-gray-300" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M90 100C90 94.7471 88.9654 89.5457 86.9552 84.6927C84.945 79.8396 81.9986 75.4301 78.2843 71.7157C74.5699 68.0014 70.1604 65.055 65.3073 63.0448C60.4543 61.0346 55.2529 60 50 60C44.7471 60 39.5457 61.0346 34.6927 63.0448C29.8396 65.055 25.4301 68.0014 21.7157 71.7157C18.0014 75.4301 15.055 79.8396 13.0448 84.6927C11.0346 89.5457 10 94.7471 10 100L90 100Z" fill="currentColor" />
<circle cx="50" cy="32" r="18" fill="currentColor" />
</svg>
<span aria-hidden="true" class="absolute bottom-0 right-0 h-2 w-2 rounded-full bg-green-400 ring-2 ring-white"></span>
</span>
<!-- avatars-xs -->
<span class="relative inline-block rounded-full bg-gray-100">
<span aria-hidden="true" class="absolute inset-0 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<svg class="h-6 w-6 rounded-full text-gray-300" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M90 100C90 94.7471 88.9654 89.5457 86.9552 84.6927C84.945 79.8396 81.9986 75.4301 78.2843 71.7157C74.5699 68.0014 70.1604 65.055 65.3073 63.0448C60.4543 61.0346 55.2529 60 50 60C44.7471 60 39.5457 61.0346 34.6927 63.0448C29.8396 65.055 25.4301 68.0014 21.7157 71.7157C18.0014 75.4301 15.055 79.8396 13.0448 84.6927C11.0346 89.5457 10 94.7471 10 100L90 100Z" fill="currentColor" />
<circle cx="50" cy="32" r="18" fill="currentColor" />
</svg>
<span aria-hidden="true" class="absolute bottom-0 right-0 h-1.5 w-1.5 rounded-full bg-green-400 ring-2 ring-white"></span>
</span><!-- avatars-2xl -->
<span class="relative inline-flex h-16 w-16 items-center justify-center rounded-full bg-gray-100">
<span aria-hidden="true" class="absolute inset-0 h-full w-full rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<span class="text-2xl font-semibold text-gray-400">PC</span>
</span>
<!-- avatars-xl -->
<span class="relative inline-flex h-14 w-14 items-center justify-center rounded-full bg-gray-100">
<span aria-hidden="true" class="absolute inset-0 h-full w-full rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<span class="text-xl font-semibold text-gray-400">PC</span>
</span>
<!-- avatars-lg -->
<span class="relative inline-flex h-12 w-12 items-center justify-center rounded-full bg-gray-100">
<span aria-hidden="true" class="absolute inset-0 h-full w-full rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<span class="text-lg font-semibold text-gray-400">PC</span>
</span>
<!-- avatars-base -->
<span class="relative inline-flex h-10 w-10 items-center justify-center rounded-full bg-gray-100">
<span aria-hidden="true" class="absolute inset-0 h-full w-full rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<span class="text-base font-semibold text-gray-400">PC</span>
</span>
<!-- avatars-sm -->
<span class="relative inline-flex h-8 w-8 items-center justify-center rounded-full bg-gray-100">
<span aria-hidden="true" class="absolute inset-0 h-full w-full rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<span class="text-sm font-semibold text-gray-400">PC</span>
</span>
<!-- avatars-xs -->
<span class="relative inline-flex h-6 w-6 items-center justify-center rounded-full bg-gray-100">
<span aria-hidden="true" class="absolute inset-0 h-full w-full rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<span class="text-xs font-semibold text-gray-400">PC</span>
</span><!-- avatars-2xl -->
<span class="relative inline-flex h-16 w-16 items-center justify-center rounded-full bg-gray-100">
<span aria-hidden="true" class="absolute inset-0 h-full w-full rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<span class="text-2xl font-semibold text-gray-400">PC</span>
<span aria-hidden="true" class="absolute bottom-0 right-0 h-4 w-4 rounded-full bg-green-400 ring-2 ring-white"></span>
</span>
<!-- avatars-xl -->
<span class="relative inline-flex h-14 w-14 items-center justify-center rounded-full bg-gray-100">
<span aria-hidden="true" class="absolute inset-0 h-full w-full rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<span class="text-xl font-semibold text-gray-400">PC</span>
<span aria-hidden="true" class="absolute bottom-0 right-0 h-3.5 w-3.5 rounded-full bg-green-400 ring-2 ring-white"></span>
</span>
<!-- avatars-lg -->
<span class="relative inline-flex h-12 w-12 items-center justify-center rounded-full bg-gray-100">
<span aria-hidden="true" class="absolute inset-0 h-full w-full rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<span class="text-lg font-semibold text-gray-400">PC</span>
<span aria-hidden="true" class="absolute bottom-0 right-0 h-3 w-3 rounded-full bg-green-400 ring-2 ring-white"></span>
</span>
<!-- avatars-base -->
<span class="relative inline-flex h-10 w-10 items-center justify-center rounded-full bg-gray-100">
<span aria-hidden="true" class="absolute inset-0 h-full w-full rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<span class="text-base font-semibold text-gray-400">PC</span>
<span aria-hidden="true" class="absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full bg-green-400 ring-2 ring-white"></span>
</span>
<!-- avatars-sm -->
<span class="relative inline-flex h-8 w-8 items-center justify-center rounded-full bg-gray-100">
<span aria-hidden="true" class="absolute inset-0 h-full w-full rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<span class="text-sm font-semibold text-gray-400">PC</span>
<span aria-hidden="true" class="absolute bottom-0 right-0 h-2 w-2 rounded-full bg-green-400 ring-2 ring-white"></span>
</span>
<!-- avatars-xs -->
<span class="relative inline-flex h-6 w-6 items-center justify-center rounded-full bg-gray-100">
<span aria-hidden="true" class="absolute inset-0 h-full w-full rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<span class="text-xs font-semibold text-gray-400">PC</span>
<span aria-hidden="true" class="absolute bottom-0 right-0 h-1.5 w-1.5 rounded-full bg-green-400 ring-2 ring-white"></span>
</span><!-- avatars-base -->
<div class="flex items-center -space-x-3.5">
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1587397845856-e6cf49176c70?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<span class="flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 text-base font-semibold text-gray-600">+6</span>
</span>
</div>
<!-- avatars-sm -->
<div class="flex items-center -space-x-3">
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1587397845856-e6cf49176c70?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<span class="flex h-8 w-8 items-center justify-center rounded-full bg-gray-100 text-sm font-semibold text-gray-600">+6</span>
</span>
</div>
<!-- avatars-xs -->
<div class="flex items-center -space-x-1.5">
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1587397845856-e6cf49176c70?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<span class="flex h-6 w-6 items-center justify-center rounded-full bg-gray-100 text-xs font-semibold text-gray-600">+6</span>
</span>
</div><!-- avatar-xl -->
<div class="flex items-center gap-x-4">
<div class="flex-none">
<span class="relative rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-14 w-14 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-14 w-14 rounded-full object-cover" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>
<div>
<p class="text-lg font-semibold text-gray-700">Lila Bennett</p>
<p class="text-base font-normal text-gray-500">[email protected]</p>
</div>
</div>
<!-- avatar-lg -->
<div class="flex items-center gap-x-3">
<div class="flex-none">
<span class="relative rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-12 w-12 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-12 w-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>
<div>
<p class="text-base font-semibold text-gray-700">Lila Bennett</p>
<p class="text-base font-normal text-gray-500">[email protected]</p>
</div>
</div>
<!-- avatar-base -->
<div class="flex items-center gap-x-2">
<div class="flex-none">
<span class="relative rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>
<div>
<p class="text-sm font-semibold text-gray-700">Lila Bennett</p>
<p class="text-sm font-normal text-gray-500">[email protected]</p>
</div>
</div>
<!-- avatar-sm -->
<div class="flex items-center gap-x-2">
<div class="flex-none">
<span class="relative rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>
<div>
<p class="text-sm font-semibold text-gray-700">Lila Bennett</p>
<p class="text-xs font-normal text-gray-500">[email protected]</p>
</div>
</div>Frequently asked questions
-
Circular avatars in multiple sizes, avatars with an online/offline status indicator, avatars with a verified tick, stacked grouped avatars, initials-based placeholders, and a labeled variant.
-
The placeholder variants use a div with a background color and centered text instead of an img tag. Just set the letter or letters you want to display.
-
The status variants have an absolutely positioned small circle on the bottom-right of the avatar. Green for online, gray for offline, just swap the color class.
-
Yes. The stacked group layouts use negative margin and a ring to create the overlapping effect. You can add or remove items and it stays consistent.
Related Tailwind CSS components
More free, copy-paste Tailwind CSS components to use in your projects.