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>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>