Components
Tailwind CSS Avatar
Avatar components are basically image or svg objects which are used to visually identify and represent any user or entity. Avatars can easily be made in different shapes, style and size using tailwind css.
By using tailwind css utility classes appearance of avatar components can be customised. border, shape, background color, size and shape can be modified as per design requirements.
Default Avatar
Basic rounded or squared avatars can be made using image element.
<img class='w-10 h-10 rounded-full' src='https://pagedone.io/asset/uploads/1704275541.png' alt='Rounded Avatar'>Avatar Size
Use Tailwind rounded avatar with different size. It can be created using height and width utility classed of tailwind css.
<img class='w-6 h-6 rounded-full' src='https://pagedone.io/asset/uploads/1704275541.png' alt='Extra small avatar'>
<img class='w-8 h-8 rounded-full' src='https://pagedone.io/asset/uploads/1704275541.png' alt='Small avatar'>
<img class='w-10 h-10 rounded-full' src='https://pagedone.io/asset/uploads/1704275541.png' alt='Medium avatar'>
<img class='w-12 h-12 rounded-full' src='https://pagedone.io/asset/uploads/1704275541.png' alt='Large avatar'>
<img class='w-14 h-14 rounded-full' src='https://pagedone.io/asset/uploads/1704275541.png' alt='Extra large avatar'>
<img class='w-16 h-16 rounded-full' src='https://pagedone.io/asset/uploads/1704275541.png' alt='Fully large avatar'>Avatar Bordered
You can use the following tailwind circle avatar to be used and apply border around the avatar by using border-{color} from Tailwind CSS.
<img class='w-10 h-10 rounded-full border-2 border-solid border-gray-400' src='https://pagedone.io/asset/uploads/1704275541.png' alt='Bordered avatar'>Avatar with indicator
This style shows user status such as inactive or active or online or offline.
<div class='relative'>
<img class='w-10 h-10 rounded-full' src='https://pagedone.io/asset/uploads/1704275541.png' alt='Rounded avatar'>
<span class='bottom-0 left-7 absolute w-3.5 h-3.5 bg-emerald-500 border-2 border-white rounded-full'></span>
</div>
<div class='relative'>
<img class='w-10 h-10 rounded-full' src='https://pagedone.io/asset/uploads/1704275541.png' alt='Rounded avatar'>
<span class='bottom-0 left-7 absolute w-3.5 h-3.5 bg-gray-300 border-2 border-white rounded-full'></span>
</div>
<div class='relative'>
<img class='w-10 h-10 rounded-full border-2 border-solid border-gray-500' src='https://pagedone.io/asset/uploads/1704275541.png' alt='Bordered rounded avatar'>
<span class='bottom-0 left-7 absolute w-3.5 h-3.5 bg-gray-300 border-2 border-white rounded-full'></span>
</div>
<div class='relative'>
<img class='w-10 h-10 rounded-full border-2 border-solid border-gray-500' src='https://pagedone.io/asset/uploads/1704275541.png' alt='Bordered rounded avatar'>
<span class='bottom-0 left-7 absolute w-3.5 h-3.5 bg-emerald-500 border-2 border-white rounded-full'></span>
</div>Placeholder icon with different colors
In the event of absence of user image svg element can be used as placeholder with different colors you can use following tailwind css avatar.
<div class='relative w-10 h-10 bg-gray-100 flex justify-center items-center rounded-full'>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M15.9998 7C15.9998 9.20914 14.2089 11 11.9998 11C9.79067 11 7.99981 9.20914 7.99981 7C7.99981 4.79086 9.79067 3 11.9998 3C14.2089 3 15.9998 4.79086 15.9998 7Z" stroke="#4B5563" stroke-width="1.6" />
<path d="M11.9998 14C9.15153 14 6.65091 15.3024 5.23341 17.2638C4.48341 18.3016 4.10841 18.8204 4.6654 19.9102C5.2224 21 6.1482 21 7.99981 21H15.9998C17.8514 21 18.7772 21 19.3342 19.9102C19.8912 18.8204 19.5162 18.3016 18.7662 17.2638C17.3487 15.3024 14.8481 14 11.9998 14Z" stroke="#4B5563" stroke-width="1.6" />
</svg>
</div>
<div class='relative w-10 h-10 bg-amber-100 border-2 border-solid border-amber-600 flex justify-center items-center rounded-full'>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M15.9998 7C15.9998 9.20914 14.2089 11 11.9998 11C9.79067 11 7.99981 9.20914 7.99981 7C7.99981 4.79086 9.79067 3 11.9998 3C14.2089 3 15.9998 4.79086 15.9998 7Z" stroke="#D97706" stroke-width="1.6" />
<path d="M11.9998 14C9.15153 14 6.65091 15.3024 5.23341 17.2638C4.48341 18.3016 4.10841 18.8204 4.6654 19.9102C5.2224 21 6.1482 21 7.99981 21H15.9998C17.8514 21 18.7772 21 19.3342 19.9102C19.8912 18.8204 19.5162 18.3016 18.7662 17.2638C17.3487 15.3024 14.8481 14 11.9998 14Z" stroke="#D97706" stroke-width="1.6" />
</svg>
</div>
<div class='relative w-10 h-10 bg-cyan-100 flex justify-center items-center rounded-full'>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M15.9998 7C15.9998 9.20914 14.2089 11 11.9998 11C9.79067 11 7.99981 9.20914 7.99981 7C7.99981 4.79086 9.79067 3 11.9998 3C14.2089 3 15.9998 4.79086 15.9998 7Z" stroke="#0891B2" stroke-width="1.6" />
<path d="M11.9998 14C9.15153 14 6.65091 15.3024 5.23341 17.2638C4.48341 18.3016 4.10841 18.8204 4.6654 19.9102C5.2224 21 6.1482 21 7.99981 21H15.9998C17.8514 21 18.7772 21 19.3342 19.9102C19.8912 18.8204 19.5162 18.3016 18.7662 17.2638C17.3487 15.3024 14.8481 14 11.9998 14Z" stroke="#0891B2" stroke-width="1.6" />
</svg>
<span class='bottom-0 left-7 absolute w-3.5 h-3.5 bg-emerald-500 border-2 border-white rounded-full'></span>
</div>
<div class='relative w-10 h-10 bg-sky-100 border-2 border-solid border-sky-600 flex justify-center items-center rounded-full'>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M15.9998 7C15.9998 9.20914 14.2089 11 11.9998 11C9.79067 11 7.99981 9.20914 7.99981 7C7.99981 4.79086 9.79067 3 11.9998 3C14.2089 3 15.9998 4.79086 15.9998 7Z" stroke="#0284C7" stroke-width="1.6" />
<path d="M11.9998 14C9.15153 14 6.65091 15.3024 5.23341 17.2638C4.48341 18.3016 4.10841 18.8204 4.6654 19.9102C5.2224 21 6.1482 21 7.99981 21H15.9998C17.8514 21 18.7772 21 19.3342 19.9102C19.8912 18.8204 19.5162 18.3016 18.7662 17.2638C17.3487 15.3024 14.8481 14 11.9998 14Z" stroke="#0284C7" stroke-width="1.6" />
</svg>
<span class='bottom-0 left-7 absolute w-3.5 h-3.5 bg-emerald-500 border-2 border-white rounded-full'></span>
</div>
<div class='relative w-10 h-10 bg-purple-100 flex justify-center items-center rounded-full'>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M15.9998 7C15.9998 9.20914 14.2089 11 11.9998 11C9.79067 11 7.99981 9.20914 7.99981 7C7.99981 4.79086 9.79067 3 11.9998 3C14.2089 3 15.9998 4.79086 15.9998 7Z" stroke="#9333EA" stroke-width="1.6" />
<path d="M11.9998 14C9.15153 14 6.65091 15.3024 5.23341 17.2638C4.48341 18.3016 4.10841 18.8204 4.6654 19.9102C5.2224 21 6.1482 21 7.99981 21H15.9998C17.8514 21 18.7772 21 19.3342 19.9102C19.8912 18.8204 19.5162 18.3016 18.7662 17.2638C17.3487 15.3024 14.8481 14 11.9998 14Z" stroke="#9333EA" stroke-width="1.6" />
</svg>
<span class='bottom-0 left-7 absolute w-3.5 h-3.5 bg-gray-300 border-2 border-white rounded-full'></span>
</div>
<div class='relative w-10 h-10 bg-red-100 border-2 border-solid border-red-600 flex justify-center items-center rounded-full'>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M15.9998 7C15.9998 9.20914 14.2089 11 11.9998 11C9.79067 11 7.99981 9.20914 7.99981 7C7.99981 4.79086 9.79067 3 11.9998 3C14.2089 3 15.9998 4.79086 15.9998 7Z" stroke="#DC2626" stroke-width="1.6" />
<path d="M11.9998 14C9.15153 14 6.65091 15.3024 5.23341 17.2638C4.48341 18.3016 4.10841 18.8204 4.6654 19.9102C5.2224 21 6.1482 21 7.99981 21H15.9998C17.8514 21 18.7772 21 19.3342 19.9102C19.8912 18.8204 19.5162 18.3016 18.7662 17.2638C17.3487 15.3024 14.8481 14 11.9998 14Z" stroke="#DC2626" stroke-width="1.6" />
</svg>
<span class='bottom-0 left-7 absolute w-3.5 h-3.5 bg-gray-300 border-2 border-white rounded-full'></span>
</div>1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More
Placeholder icon with gradient
In the event of absence of user image svg element can be used as placeholder with gradient.
<div class='relative w-10 h-10 bg-gray-100 flex justify-center items-center rounded-full'>
<img src="https://pagedone.io/asset/uploads/1704277131.png" alt="Rounded avatar">
</div>
<div class='relative w-10 h-10 bg-amber-100 border-2 border-solid border-amber-600 flex justify-center items-center rounded-full'>
<img src="https://pagedone.io/asset/uploads/1704277147.png" alt="Bordered rounded avatar">
</div>
<div class='relative w-10 h-10 bg-cyan-100 flex justify-center items-center rounded-full'>
<img src="https://pagedone.io/asset/uploads/1704277168.png" alt="Rounded avatar">
<span class='bottom-0 left-7 absolute w-3.5 h-3.5 bg-emerald-500 border-2 border-white rounded-full'></span>
</div>
<div class='relative w-10 h-10 bg-sky-100 border-2 border-solid border-sky-600 flex justify-center items-center rounded-full'>
<img src="https://pagedone.io/asset/uploads/1704277186.png" alt="Bordered rounded avatar">
<span class='bottom-0 left-7 absolute w-3.5 h-3.5 bg-emerald-500 border-2 border-white rounded-full'></span>
</div>
<div class='relative w-10 h-10 bg-purple-100 flex justify-center items-center rounded-full'>
<img src="https://pagedone.io/asset/uploads/1704277202.png" alt="Rounded avatar">
<span class='bottom-0 left-7 absolute w-3.5 h-3.5 bg-gray-300 border-2 border-white rounded-full'></span>
</div>
<div class='relative w-10 h-10 bg-red-100 border-2 border-solid border-red-600 flex justify-center items-center rounded-full'>
<img src="https://pagedone.io/asset/uploads/1704277213.png" alt="Bordered rounded avatar">
<span class='bottom-0 left-7 absolute w-3.5 h-3.5 bg-gray-300 border-2 border-white rounded-full'></span>
</div>Placeholder with memoji
In the event of absence of user image element can be used as placeholder with memoji.
<div class='relative w-10 h-10 bg-gray-100 flex justify-center items-center rounded-full'>
<img src="https://pagedone.io/asset/uploads/1704277384.png" alt="Rounded avatar">
</div>
<div class='relative w-10 h-10 bg-amber-100 border-2 border-solid border-amber-500 flex justify-center items-center rounded-full'>
<img src="https://pagedone.io/asset/uploads/1704277384.png" alt="Bordered rounded avatar">
</div>
<div class='relative w-10 h-10 bg-cyan-100 flex justify-center items-center rounded-full'>
<img src="https://pagedone.io/asset/uploads/1704277384.png" alt="Rounded avatar">
<span class='bottom-0 left-7 absolute w-3.5 h-3.5 bg-emerald-500 border-2 border-white rounded-full'></span>
</div>
<div class='relative w-10 h-10 bg-sky-100 border-2 border-solid border-sky-600 flex justify-center items-center rounded-full'>
<img src="https://pagedone.io/asset/uploads/1704277384.png" alt="Bordered rounded avatar">
<span class='bottom-0 left-7 absolute w-3.5 h-3.5 bg-emerald-500 border-2 border-white rounded-full'></span>
</div>
<div class='relative w-10 h-10 bg-purple-100 flex justify-center items-center rounded-full'>
<img src="https://pagedone.io/asset/uploads/1704277384.png" alt="Rounded avatar">
<span class='bottom-0 left-7 absolute w-3.5 h-3.5 bg-gray-300 border-2 border-white rounded-full'></span>
</div>
<div class='relative w-10 h-10 bg-red-100 border-2 border-solid border-red-600 flex justify-center items-center rounded-full'>
<img src="https://pagedone.io/asset/uploads/1704277384.png" alt="Bordered rounded avatar">
<span class='bottom-0 left-7 absolute w-3.5 h-3.5 bg-gray-300 border-2 border-white rounded-full'></span>
</div>Placeholder initials with different colors
This can be used in absence of profile picture. Initials of the user can be used. Eg. for Jhon Abraham JA can be shown.
PD
PD
PD
PD
PD
PD
<div class='relative w-10 h-10 bg-gray-100 flex justify-center items-center rounded-full'>
<span class='text-gray-600 text-base font-medium'>PD</span>
</div>
<div class='relative w-10 h-10 bg-amber-100 border-2 border-solid border-amber-600 flex justify-center items-center rounded-full'>
<span class='text-amber-600 text-base font-medium'>PD</span>
</div>
<div class='relative w-10 h-10 bg-cyan-100 flex justify-center items-center rounded-full'>
<span class='text-cyan-600 text-base font-medium'>PD</span>
<span class='bottom-0 left-7 absolute w-3.5 h-3.5 bg-emerald-500 border-2 border-white rounded-full'></span>
</div>
<div class='relative w-10 h-10 bg-sky-100 border-2 border-solid border-emerald-600 flex justify-center items-center rounded-full'>
<span class='text-sky-600 text-base font-medium'>PD</span>
<span class='bottom-0 left-7 absolute w-3.5 h-3.5 bg-emerald-500 border-2 border-white rounded-full'></span>
</div>
<div class='relative w-10 h-10 bg-purple-100 flex justify-center items-center rounded-full'>
<span class='text-purple-600 text-base font-medium'>PD</span>
<span class='bottom-0 left-7 absolute w-3.5 h-3.5 bg-gray-300 border-2 border-white rounded-full'></span>
</div>
<div class='relative w-10 h-10 bg-red-100 border-2 border-solid border-red-600 flex justify-center items-center rounded-full'>
<span class='text-red-600 text-base font-medium'>PD</span>
<span class='bottom-0 left-7 absolute w-3.5 h-3.5 bg-gray-300 border-2 border-white rounded-full'></span>
</div>Avatar tooltip
Tooltip can be added to show more relevant information about the avatar. whenever user hovers on avatar more information will be shown.
This is a tooltip
<div class='group relative pt-10'>
<img class='w-10 h-10 rounded-full' src='https://pagedone.io/asset/uploads/1704275541.png' alt='Rounded avatar'>
<div class='absolute bottom-8 left-1/2 z-20 mb-3 -translate-x-1/2 whitespace-nowrap rounded-full bg-white py-[8px] px-2 text-xs font-semibold text-gray-800 opacity-0 group-hover:opacity-100 transition-all duration-500 shadow-[0px_12px_30px_-4px_rgba(16,24,40,0.08)]'>
<span class='absolute bottom-[-5px] left-1/2 -z-10 h-3 w-3 -translate-x-1/2 rotate-45 bg-white'></span> This is a tooltip
</div>
</div>Stacked avatar tailwind CSS
When a group of people are to be shown this tailwind avatar group can be used where avatars will overlap one another as shown below.
<div class='flex mb-5 -space-x-4'>
<img class='w-10 h-10 border-2 border-white rounded-full ' src='https://pagedone.io/asset/uploads/1704275541.png' alt='Stacked rounded avatar'>
<img class='w-10 h-10 border-2 border-white rounded-full ' src='https://pagedone.io/asset/uploads/1704275541.png' alt='Stacked rounded avatar'>
<img class='w-10 h-10 border-2 border-white rounded-full ' src='https://pagedone.io/asset/uploads/1704275541.png' alt='Stacked rounded avatar'>
</div>Avatar media
Avatar with media is used when more information needs to be shown along with avatar such as user name, email id, contact details or any other credentials.
John Deo
johndeo@gmail.com<div class='flex items-center justify-center space-x-4'>
<img class='w-10 h-10 rounded-full' src='https://pagedone.io/asset/uploads/1704275541.png' alt='Media rounded avatar'>
<div class='font-medium'>
<h5 class='text-base font-semibold text-gray-900'>John Deo</h5>
<span class='text-sm text-gray-500'>johndeo@gmail.com</span>
</div>
</div>
Examples
Tailwind CSS Avatar Examples
Avatar components are basically image or svg objects which are used to visually identify and represent any user or entity. Avatars can easily be made in different shapes, style and size using tailwind css.
Square Avatar Examples
Avatar with status is used to visually represent a user’s presence or activity state. It includes elements like a placeholder icon, active or inactive status bar, and other state indicators.
HB
3
<div class="w-full relative">
<div class="flex items-center justify-center gap-4">
<!-- Square Avatar -->
<img class='w-10 h-10 rounded-lg' src='https://pagedone.io/asset/uploads/1762340174.png' alt='avatar'>
<!-- Avatar with Placeholder Initials -->
<span class="bg-neutral-100 flex items-center justify-center rounded-lg w-10 h-10">HB</span>
<!-- Avatar with Placeholder Icon -->
<div class="bg-neutral-100 flex items-center justify-center rounded-lg w-10 h-10">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
class="size-4">
<path
d="M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z"
stroke="#000000" stroke-width="2" class="my-path"></path>
<path
d="M20 21V20.1429C20 19.0805 20 18.5493 19.8997 18.1099C19.5578 16.6119 18.3881 15.4422 16.8901 15.1003C16.4507 15 15.9195 15 14.8571 15H10C8.13623 15 7.20435 15 6.46927 15.3045C5.48915 15.7105 4.71046 16.4892 4.30448 17.4693C4 18.2044 4 19.1362 4 21"
stroke="#000000" stroke-width="2" stroke-linecap="round" class="my-path"></path>
</svg>
</div>
<!-- Avatar with Online Indicator -->
<div class="relative flex items-center justify-center rounded-lg">
<img class='w-10 h-10 rounded-lg' src='https://pagedone.io/asset/uploads/1762340174.png' alt='avatar'>
<span class="-bottom-1 -right-1 absolute size-3 rounded-full border-2 border-white bg-green-500"></span>
</div>
<!-- Avatar with Offline Indicator -->
<div class="relative flex items-center justify-center rounded-lg">
<img class='w-10 h-10 rounded-lg' src='https://pagedone.io/asset/uploads/1762340174.png' alt='avatar'>
<span class="-bottom-1 -right-1 absolute size-3 rounded-full border-2 border-white bg-gray-400"></span>
</div>
<!-- Avatar with Verification Check -->
<div class="relative flex items-center justify-center rounded-lg">
<img class='w-10 h-10 rounded-lg' src='https://pagedone.io/asset/uploads/1762340174.png' alt='avatar'>
<span class="-bottom-1 -right-1 absolute rounded-full border-2 border-white bg-white"><svg width="24"
height="24" class="size-3" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M9.84417 3.10743C11.026 1.89713 12.9725 1.89713 14.1543 3.10743L14.8049 3.77372C15.0747 4.05001 15.4458 4.20376 15.832 4.19916L16.7632 4.18807C18.4546 4.16792 19.831 5.5443 19.8109 7.23577L19.7998 8.16695C19.7952 8.55309 19.9489 8.92426 20.2252 9.19406L20.8915 9.84465C22.1018 11.0265 22.1018 12.973 20.8915 14.1548L20.2252 14.8054C19.9489 15.0751 19.7952 15.4463 19.7998 15.8325L19.8109 16.7636C19.831 18.4551 18.4546 19.8315 16.7632 19.8113L15.832 19.8003C15.4458 19.7957 15.0747 19.9494 14.8049 20.2257L14.1543 20.892C12.9725 22.1023 11.026 22.1023 9.84417 20.892L9.19357 20.2257C8.92378 19.9494 8.5526 19.7957 8.16646 19.8003L7.23528 19.8113C5.54381 19.8315 4.16743 18.4551 4.18758 16.7636L4.19867 15.8325C4.20327 15.4463 4.04952 15.0751 3.77323 14.8054L3.10694 14.1548C1.89664 12.973 1.89664 11.0265 3.10694 9.84465L3.77323 9.19405C4.04952 8.92426 4.20327 8.55309 4.19867 8.16695L4.18758 7.23577C4.16743 5.5443 5.54381 4.16792 7.23528 4.18807L8.16646 4.19916C8.5526 4.20376 8.92378 4.05001 9.19357 3.77372L9.84417 3.10743ZM15.6256 10.6252C15.9381 10.3128 15.9381 9.80622 15.6256 9.4938C15.3132 9.18138 14.8067 9.18138 14.4943 9.4938L11.482 12.5061C11.2775 12.7105 11.1526 12.8339 11.0591 12.9137C10.9656 12.8339 10.8406 12.7105 10.6362 12.5061L9.56482 11.4347C9.2524 11.1223 8.74586 11.1223 8.43344 11.4347C8.12103 11.7471 8.12103 12.2537 8.43345 12.5661L9.53408 13.6667C9.74144 13.8742 9.94954 14.0824 10.1457 14.2321C10.3696 14.4029 10.6691 14.5708 11.0591 14.5708C11.4491 14.5708 11.7486 14.4029 11.9725 14.2321C12.1686 14.0824 12.3767 13.8742 12.5841 13.6667L15.6256 10.6252Z"
fill="#2b7fff" class="my-path"></path>
</svg></span>
</div>
<!-- Avatar with Count Indicator -->
<div class="relative flex items-center justify-center rounded-lg">
<img class='w-10 h-10 rounded-lg' src='https://pagedone.io/asset/uploads/1762340174.png' alt='avatar'>
<span
class="-right-2 -top-2 absolute size-5 rounded-full border-2 border-white bg-red-500 font-medium text-white text-xs text-center">3</span>
</div>
</div>
</div>Standard Avatar Examples
Avatar with status is used to visually represent a user’s presence or activity state. It includes elements like a placeholder icon, active or inactive status bar, and other state indicators.
HB
3
<div class="w-full">
<div class="flex items-center justify-center gap-4">
<!-- Standard Avatar -->
<img class='w-10 h-10 rounded-full' src='https://pagedone.io/asset/uploads/1762340174.png' alt='avatar'>
<!-- Avatar with Placeholder Initials -->
<span class="bg-neutral-100 flex items-center justify-center rounded-full w-10 h-10">HB</span>
<!-- Avatar with Placeholder Icon -->
<div class="bg-neutral-100 flex items-center justify-center rounded-full w-10 h-10">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4">
<path
d="M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z"
stroke="#000000" stroke-width="2" class="my-path"></path>
<path
d="M20 21V20.1429C20 19.0805 20 18.5493 19.8997 18.1099C19.5578 16.6119 18.3881 15.4422 16.8901 15.1003C16.4507 15 15.9195 15 14.8571 15H10C8.13623 15 7.20435 15 6.46927 15.3045C5.48915 15.7105 4.71046 16.4892 4.30448 17.4693C4 18.2044 4 19.1362 4 21"
stroke="#000000" stroke-width="2" stroke-linecap="round" class="my-path"></path>
</svg>
</div>
<!-- Avatar with Online Indicator -->
<div class="relative flex items-center justify-center rounded-full">
<img class='w-10 h-10 rounded-full' src='https://pagedone.io/asset/uploads/1762340174.png' alt='avatar'>
<span
class="-bottom-0 -right-1 absolute w-3 h-3 rounded-full border-2 border-white bg-green-500"></span>
</div>
<!-- Avatar with Offline Indicator -->
<div class="relative flex items-center justify-center rounded-full">
<img class='w-10 h-10 rounded-full' src='https://pagedone.io/asset/uploads/1762340174.png' alt='avatar'>
<span
class="-bottom-0 -right-1 absolute w-3 h-3 rounded-full border-2 border-white bg-gray-400"></span>
</div>
<!-- Avatar with Offline Indicator -->
<div class="relative flex items-center justify-center rounded-full">
<img class='w-10 h-10 rounded-full' src='https://pagedone.io/asset/uploads/1762340174.png' alt='avatar'>
<span class="-bottom-1 -right-1 absolute rounded-full border-2 border-white bg-white"><svg width="24"
height="24" class="w-3 h-3" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M9.84417 3.10743C11.026 1.89713 12.9725 1.89713 14.1543 3.10743L14.8049 3.77372C15.0747 4.05001 15.4458 4.20376 15.832 4.19916L16.7632 4.18807C18.4546 4.16792 19.831 5.5443 19.8109 7.23577L19.7998 8.16695C19.7952 8.55309 19.9489 8.92426 20.2252 9.19406L20.8915 9.84465C22.1018 11.0265 22.1018 12.973 20.8915 14.1548L20.2252 14.8054C19.9489 15.0751 19.7952 15.4463 19.7998 15.8325L19.8109 16.7636C19.831 18.4551 18.4546 19.8315 16.7632 19.8113L15.832 19.8003C15.4458 19.7957 15.0747 19.9494 14.8049 20.2257L14.1543 20.892C12.9725 22.1023 11.026 22.1023 9.84417 20.892L9.19357 20.2257C8.92378 19.9494 8.5526 19.7957 8.16646 19.8003L7.23528 19.8113C5.54381 19.8315 4.16743 18.4551 4.18758 16.7636L4.19867 15.8325C4.20327 15.4463 4.04952 15.0751 3.77323 14.8054L3.10694 14.1548C1.89664 12.973 1.89664 11.0265 3.10694 9.84465L3.77323 9.19405C4.04952 8.92426 4.20327 8.55309 4.19867 8.16695L4.18758 7.23577C4.16743 5.5443 5.54381 4.16792 7.23528 4.18807L8.16646 4.19916C8.5526 4.20376 8.92378 4.05001 9.19357 3.77372L9.84417 3.10743ZM15.6256 10.6252C15.9381 10.3128 15.9381 9.80622 15.6256 9.4938C15.3132 9.18138 14.8067 9.18138 14.4943 9.4938L11.482 12.5061C11.2775 12.7105 11.1526 12.8339 11.0591 12.9137C10.9656 12.8339 10.8406 12.7105 10.6362 12.5061L9.56482 11.4347C9.2524 11.1223 8.74586 11.1223 8.43344 11.4347C8.12103 11.7471 8.12103 12.2537 8.43345 12.5661L9.53408 13.6667C9.74144 13.8742 9.94954 14.0824 10.1457 14.2321C10.3696 14.4029 10.6691 14.5708 11.0591 14.5708C11.4491 14.5708 11.7486 14.4029 11.9725 14.2321C12.1686 14.0824 12.3767 13.8742 12.5841 13.6667L15.6256 10.6252Z"
fill="#2b7fff" class="my-path"></path>
</svg></span>
</div>
<!-- Avatar with Count Indicator -->
<div class="relative flex items-center justify-center rounded-full">
<img class='w-10 h-10 rounded-full' src='https://pagedone.io/asset/uploads/1762340174.png' alt='avatar'>
<span
class="-right-2 -top-2 absolute w-5 h-5 rounded-full border-2 border-white bg-red-500 font-medium text-white text-xs text-center">3</span>
</div>
</div>
</div>
1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More