Avatar Using Tailwind UI
The avatar component is used to display user profile pictures or other visual representations of specific entities, such as users, team members, or contacts. Variants of the avatar component allow us to customize different appearances and features according to the desired design and requirements.
avatar
Loading component...
243 lines
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
</style>
<h1 class="text-center font-bold pt-10 text-3xl">Avatar component variant</h1>
<div class="p-10 flex flex-col gap-5 items-center">
<!-- Letter Avatar -->
<div class="flex flex-row overflow-hidden md:w-5/12 gap-x-4 items-center justify-center">
<div class="w-6 h-6 rounded-full flex items-center justify-center bg-blue-500 text-white font-semibold text-sm">
ZZ
</div>
<div class="w-8 h-8 rounded-full flex items-center justify-center bg-blue-500 text-white font-semibold text-sm">
ZZ
</div>
<div class="w-10 h-10 rounded-full flex items-center justify-center bg-blue-500 text-white font-semibold text-sm">
ZZ
</div>
<div class="w-12 h-12 rounded-full flex items-center justify-center bg-blue-500 text-white font-semibold text-sm">
ZZ
</div>
<div class="w-16 h-16 rounded-full flex items-center justify-center bg-blue-500 text-white font-semibold text-sm">
ZZ
</div>
</div>
<!-- Image Avatar -->
<div class="flex flex-row overflow-hidden md:w-5/12 gap-x-4 items-center justify-center">
<img class="w-6 h-6 rounded-full object-cover"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Avatar">
<img class="w-8 h-8 rounded-full object-cover"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Avatar">
<img class="w-10 h-10 rounded-full object-cover"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Avatar">
<img class="w-12 h-12 rounded-full object-cover"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Avatar">
<img class="w-16 h-16 rounded-full object-cover"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Avatar">
</div>
<!-- Icon Avatar -->
<div class="flex flex-row overflow-hidden md:w-5/12 gap-x-4 items-center justify-center">
<div class="w-6 h-6 rounded-full flex items-center justify-center bg-yellow-500 text-white">
<svg class="w-2 h-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
d="M20 22H4V20C4 17.2386 6.23858 15 9 15H15C17.7614 15 20 17.2386 20 20V22ZM12 13C8.68629 13 6 10.3137 6 7C6 3.68629 8.68629 1 12 1C15.3137 1 18 3.68629 18 7C18 10.3137 15.3137 13 12 13Z">
</path>
</svg>
</div>
<div class="w-8 h-8 rounded-full flex items-center justify-center bg-yellow-500 text-white">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
d="M20 22H4V20C4 17.2386 6.23858 15 9 15H15C17.7614 15 20 17.2386 20 20V22ZM12 13C8.68629 13 6 10.3137 6 7C6 3.68629 8.68629 1 12 1C15.3137 1 18 3.68629 18 7C18 10.3137 15.3137 13 12 13Z">
</path>
</svg>
</div>
<div class="w-10 h-10 rounded-full flex items-center justify-center bg-yellow-500 text-white">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
d="M20 22H4V20C4 17.2386 6.23858 15 9 15H15C17.7614 15 20 17.2386 20 20V22ZM12 13C8.68629 13 6 10.3137 6 7C6 3.68629 8.68629 1 12 1C15.3137 1 18 3.68629 18 7C18 10.3137 15.3137 13 12 13Z">
</path>
</svg>
</div>
<div class="w-12 h-12 rounded-full flex items-center justify-center bg-yellow-500 text-white">
<svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
d="M20 22H4V20C4 17.2386 6.23858 15 9 15H15C17.7614 15 20 17.2386 20 20V22ZM12 13C8.68629 13 6 10.3137 6 7C6 3.68629 8.68629 1 12 1C15.3137 1 18 3.68629 18 7C18 10.3137 15.3137 13 12 13Z">
</path>
</svg>
</div>
<div class="w-16 h-16 rounded-full flex items-center justify-center bg-yellow-500 text-white">
<svg class="w-10 h-10" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
d="M20 22H4V20C4 17.2386 6.23858 15 9 15H15C17.7614 15 20 17.2386 20 20V22ZM12 13C8.68629 13 6 10.3137 6 7C6 3.68629 8.68629 1 12 1C15.3137 1 18 3.68629 18 7C18 10.3137 15.3137 13 12 13Z">
</path>
</svg>
</div>
</div>
<!-- Avatar Square -->
<div class="flex flex-row overflow-hidden md:w-5/12 gap-x-4 items-center justify-center">
<img class="w-6 h-6 rounded-md object-cover"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Avatar">
<img class="w-8 h-8 rounded-md object-cover"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Avatar">
<img class="w-10 h-10 rounded-md object-cover"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Avatar">
<img class="w-12 h-12 rounded-md object-cover"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Avatar">
<img class="w-16 h-16 rounded-md object-cover"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Avatar">
</div>
<!-- Avatar with Active Status Bottom -->
<div class="flex flex-row overflow-hidden md:w-5/12 gap-x-4 items-center justify-center">
<div class="relative">
<img class="w-6 h-6 rounded-full object-cover"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Avatar">
<div class="absolute bottom-0 right-0 w-2 h-2 bg-green-500 border-2 border-white rounded-full"></div>
</div>
<div class="relative inline-block">
<img class="w-8 h-8 rounded-full object-cover"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Avatar">
<div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-white rounded-full"></div>
</div>
<div class="relative inline-block">
<img class="w-10 h-10 rounded-full object-cover"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Avatar">
<div class="absolute bottom-0 right-0 w-4 h-4 bg-green-500 border-2 border-white rounded-full"></div>
</div>
<div class="relative">
<img class="w-12 h-12 rounded-full object-cover"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Avatar">
<div class="absolute bottom-0 right-0 w-4 h-4 bg-green-500 border-2 border-white rounded-full"></div>
</div>
<div class="relative">
<img class="w-16 h-16 rounded-full object-cover"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Avatar">
<div class="absolute bottom-0 right-0 w-4 h-4 bg-green-500 border-2 border-white rounded-full"></div>
</div>
</div>
<!-- Avatar with Active Status Top-->
<div class="flex flex-row overflow-hidden md:w-5/12 gap-x-4 items-center justify-center">
<div class="relative">
<img class="w-6 h-6 rounded-full object-cover"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Avatar">
<div class="absolute top-0 right-0 w-2 h-2 bg-green-500 border-2 border-white rounded-full"></div>
</div>
<div class="relative inline-block">
<img class="w-8 h-8 rounded-full object-cover"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Avatar">
<div class="absolute top-0 right-0 w-3 h-3 bg-green-500 border-2 border-white rounded-full"></div>
</div>
<div class="relative inline-block">
<img class="w-10 h-10 rounded-full object-cover"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Avatar">
<div class="absolute top-0 right-0 w-4 h-4 bg-green-500 border-2 border-white rounded-full"></div>
</div>
<div class="relative">
<img class="w-12 h-12 rounded-full object-cover"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Avatar">
<div class="absolute top-0 right-0 w-4 h-4 bg-green-500 border-2 border-white rounded-full"></div>
</div>
<div class="relative">
<img class="w-16 h-16 rounded-full object-cover"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Avatar">
<div class="absolute top-0 right-0 w-4 h-4 bg-green-500 border-2 border-white rounded-full"></div>
</div>
</div>
<!-- Avatar image border -->
<div class="flex flex-row overflow-hidden md:w-5/12 gap-x-4 items-center justify-center">
<img class="w-6 h-6 rounded-full object-cover border-2 border-yellow-500"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Avatar">
<img class="w-8 h-8 rounded-full object-cover border-2 border-yellow-500"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Avatar">
<img class="w-10 h-10 rounded-full object-cover border-2 border-yellow-500"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Avatar">
<img class="w-12 h-12 rounded-full object-cover border-2 border-yellow-500"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Avatar">
<img class="w-16 h-16 rounded-full object-cover border-2 border-yellow-500"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Avatar">
</div>
<!-- Avatar image ring -->
<div class="flex flex-row overflow-hidden md:w-5/12 gap-x-4 items-center justify-center">
<img class="w-6 h-6 rounded-full object-cover ring-2 ring-yellow-500 p-1"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Avatar">
<img class="w-8 h-8 rounded-full object-cover ring-2 ring-yellow-500 p-1"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Avatar">
<img class="w-10 h-10 rounded-full object-cover ring-2 ring-yellow-500 p-1"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Avatar">
<img class="w-12 h-12 rounded-full object-cover ring-2 ring-yellow-500 p-1"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Avatar">
<img class="w-16 h-16 rounded-full object-cover ring-2 ring-yellow-500 p-1"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Avatar">
</div>
<!-- Avatar Grup -->
<div class="flex overflow-hidden md:w-5/12 items-center justify-center">
<img class="w-12 h-12 -mx-1.5 rounded-full object-cover border-2 border-white"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Avatar">
<img class="w-12 h-12 -mx-1.5 rounded-full object-cover border-2 border-white"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Avatar">
<img class="w-12 h-12 -mx-1.5 rounded-full object-cover border-2 border-white"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Avatar">
<img class="w-12 h-12 -mx-1.5 rounded-full object-cover border-2 border-white"
src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Avatar">
<div
class="w-12 h-12 -mx-1.5 rounded-full flex border-2 border-white items-center justify-center bg-gray-500 text-white font-semibold text-md">
+15
</div>
</div>
</div>