components
Tailwind CSS Avatar
<div class="flex flex-wrap justify-center gap-3">
<div class="h-10 w-10">
<img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1645378999013-95abebf5f3c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="h-10 w-10">
<img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="h-10 w-10">
<img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="h-10 w-10">
<img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="h-10 w-10">
<img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="h-10 w-10">
<img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1487309078313-fad80c3ec1e5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
</div>
<div class="flex flex-wrap justify-center gap-3">
<div class="h-10 w-10">
<img class="h-full w-full rounded-md object-cover object-center" src="https://images.unsplash.com/photo-1645378999013-95abebf5f3c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="h-10 w-10">
<img class="h-full w-full rounded-md object-cover object-center" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="h-10 w-10">
<img class="h-full w-full rounded-md object-cover object-center" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="h-10 w-10">
<img class="h-full w-full rounded-md object-cover object-center" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="h-10 w-10">
<img class="h-full w-full rounded-md object-cover object-center" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="h-10 w-10">
<img class="h-full w-full rounded-md object-cover object-center" src="https://images.unsplash.com/photo-1487309078313-fad80c3ec1e5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
</div>
<div class="flex flex-wrap items-end justify-center gap-3">
<div class="h-6 w-6">
<img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="h-8 w-8">
<img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="h-10 w-10">
<img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="h-12 w-12">
<img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="h-14 w-14">
<img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="h-16 w-16">
<img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
</div>
<div class="flex flex-wrap items-end justify-center gap-3">
<div class="flex h-6 w-6 items-center justify-center overflow-hidden rounded-full bg-secondary-100">
<svg class="h-1/2 w-1/2 text-secondary-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path d="M7.5 6.5C7.5 8.981 9.519 11 12 11s4.5-2.019 4.5-4.5S14.481 2 12 2 7.5 4.019 7.5 6.5zM20 21h1v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h1 1 14H20z"></path>
</svg>
</div>
<div class="flex h-8 w-8 items-center justify-center overflow-hidden rounded-full bg-secondary-100">
<svg class="h-1/2 w-1/2 text-secondary-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path d="M7.5 6.5C7.5 8.981 9.519 11 12 11s4.5-2.019 4.5-4.5S14.481 2 12 2 7.5 4.019 7.5 6.5zM20 21h1v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h1 1 14H20z"></path>
</svg>
</div>
<div class="flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-secondary-100">
<svg class="h-1/2 w-1/2 text-secondary-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path d="M7.5 6.5C7.5 8.981 9.519 11 12 11s4.5-2.019 4.5-4.5S14.481 2 12 2 7.5 4.019 7.5 6.5zM20 21h1v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h1 1 14H20z"></path>
</svg>
</div>
<div class="flex h-12 w-12 items-center justify-center overflow-hidden rounded-full bg-secondary-100">
<svg class="h-1/2 w-1/2 text-secondary-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path d="M7.5 6.5C7.5 8.981 9.519 11 12 11s4.5-2.019 4.5-4.5S14.481 2 12 2 7.5 4.019 7.5 6.5zM20 21h1v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h1 1 14H20z"></path>
</svg>
</div>
<div class="flex h-14 w-14 items-center justify-center overflow-hidden rounded-full bg-secondary-100">
<svg class="h-1/2 w-1/2 text-secondary-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path d="M7.5 6.5C7.5 8.981 9.519 11 12 11s4.5-2.019 4.5-4.5S14.481 2 12 2 7.5 4.019 7.5 6.5zM20 21h1v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h1 1 14H20z"></path>
</svg>
</div>
<div class="flex h-16 w-16 items-center justify-center overflow-hidden rounded-full bg-secondary-100">
<svg class="h-1/2 w-1/2 text-secondary-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path d="M7.5 6.5C7.5 8.981 9.519 11 12 11s4.5-2.019 4.5-4.5S14.481 2 12 2 7.5 4.019 7.5 6.5zM20 21h1v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h1 1 14H20z"></path>
</svg>
</div>
</div>
<div class="flex flex-wrap items-end justify-center gap-3">
<div class="flex h-6 w-6 items-center justify-center overflow-hidden rounded-full bg-secondary-100 text-secondary-400">
<span class="text-xs"> SB </span>
</div>
<div class="flex h-8 w-8 items-center justify-center overflow-hidden rounded-full bg-secondary-100 text-secondary-400">
<span class="text-sm"> SB </span>
</div>
<div class="flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-secondary-100 text-secondary-400">
<span class="text-base"> SB </span>
</div>
<div class="flex h-12 w-12 items-center justify-center overflow-hidden rounded-full bg-secondary-100 text-secondary-400">
<span class="text-lg"> SB </span>
</div>
<div class="flex h-14 w-14 items-center justify-center overflow-hidden rounded-full bg-secondary-100 text-secondary-400">
<span class="text-xl"> SB </span>
</div>
<div class="flex h-16 w-16 items-center justify-center overflow-hidden rounded-full bg-secondary-100 text-secondary-400">
<span class="text-xl"> SB </span>
</div>
</div>
<div class="flex flex-wrap items-end justify-center gap-3">
<div class="relative h-6 w-6">
<img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1645378999013-95abebf5f3c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
<span class="absolute right-0 bottom-0 h-1.5 w-1.5 rounded-full bg-secondary-300 ring ring-white"></span>
</div>
<div class="relative h-8 w-8">
<img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1645378999013-95abebf5f3c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
<span class="absolute bottom-0 right-0 h-2 w-2 rounded-full bg-green-400 ring ring-white"></span>
</div>
<div class="relative h-10 w-10">
<img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1645378999013-95abebf5f3c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
<span class="absolute right-0 bottom-0 h-2.5 w-2.5 rounded-full bg-red-400 ring ring-white"></span>
</div>
<div class="relative h-12 w-12">
<img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1645378999013-95abebf5f3c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
<span class="absolute bottom-0 right-0 h-3 w-3 rounded-full bg-secondary-300 ring ring-white"></span>
</div>
<div class="relative h-14 w-14">
<img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1645378999013-95abebf5f3c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
<span class="absolute right-0 bottom-0 h-3.5 w-3.5 rounded-full bg-green-400 ring ring-white"></span>
</div>
<div class="relative h-16 w-16">
<img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1645378999013-95abebf5f3c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
<span class="absolute bottom-0 right-0 h-4 w-4 rounded-full bg-red-400 ring ring-white"></span>
</div>
</div>
<div class="flex flex-wrap items-end justify-center gap-3">
<div class="relative h-6 w-6">
<img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
<span class="absolute right-0 top-0 h-1.5 w-1.5 rounded-full bg-secondary-300 ring ring-white"></span>
</div>
<div class="relative h-8 w-8">
<img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-green-400 ring ring-white"></span>
</div>
<div class="relative h-10 w-10">
<img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
<span class="absolute right-0 top-0 h-2.5 w-2.5 rounded-full bg-red-400 ring ring-white"></span>
</div>
<div class="relative h-12 w-12">
<img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
<span class="absolute top-0 right-0 h-3 w-3 rounded-full bg-secondary-300 ring ring-white"></span>
</div>
<div class="relative h-14 w-14">
<img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
<span class="absolute right-0 top-0 h-3.5 w-3.5 rounded-full bg-green-400 ring ring-white"></span>
</div>
<div class="relative h-16 w-16">
<img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
<span class="absolute top-0 right-0 h-4 w-4 rounded-full bg-red-400 ring ring-white"></span>
</div>
</div>
<div class="flex items-center justify-center -space-x-1">
<div class="h-10 w-10">
<img class="h-full w-full rounded-full object-cover object-center ring ring-white" src="https://images.unsplash.com/photo-1645378999013-95abebf5f3c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="h-10 w-10">
<img class="h-full w-full rounded-full object-cover object-center ring ring-white" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="h-10 w-10">
<img class="h-full w-full rounded-full object-cover object-center ring ring-white" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="h-10 w-10">
<img class="h-full w-full rounded-full object-cover object-center ring ring-white" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="h-10 w-10">
<img class="h-full w-full rounded-full object-cover object-center ring ring-white" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="h-10 w-10">
<img class="h-full w-full rounded-full object-cover object-center ring ring-white" src="https://images.unsplash.com/photo-1487309078313-fad80c3ec1e5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-secondary-100 text-secondary-400 ring ring-white">
<span class="text-base"> SB </span>
</div>
</div>
<div class="flex flex-wrap items-center justify-center gap-3">
<div class="h-10 w-10">
<img class="h-full w-full rounded-full object-cover object-center ring ring-white" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div>
<div class="text-sm font-medium text-secondary-500">Steven Jobs</div>
<div class="text-xs text-secondary-400">Joined in April 1976</div>
</div>
</div>