Avatar Combined
<section class="max-w-5xl mx-auto p-8">
<h1 class="text-3xl font-bold text-center mb-10">Avatar Component Showcase</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
<!-- Basic Avatars -->
<div class="bg-white p-6 rounded-lg shadow-md">
<h2 class="text-xl font-semibold mb-4">Basic Avatars</h2>
<div class="flex flex-wrap gap-4 items-center">
<div class="avatar">
<div class="w-24 rounded">
<img src="https://i.pravatar.cc/300?img=1" alt="Profile picture" />
</div>
</div>
<div class="avatar">
<div class="w-20 rounded">
<img src="https://i.pravatar.cc/300?img=2" alt="Profile picture" />
</div>
</div>
<div class="avatar">
<div class="w-16 rounded">
<img src="https://i.pravatar.cc/300?img=3" alt="Profile picture" />
</div>
</div>
<div class="avatar">
<div class="w-12 rounded">
<img src="https://i.pravatar.cc/300?img=4" alt="Profile picture" />
</div>
</div>
<div class="avatar">
<div class="w-8 rounded">
<img src="https://i.pravatar.cc/300?img=5" alt="Profile picture" />
</div>
</div>
</div>
</div>
<!-- Rounded Avatars -->
<div class="bg-white p-6 rounded-lg shadow-md">
<h2 class="text-xl font-semibold mb-4">Rounded Avatars</h2>
<div class="flex flex-wrap gap-4 items-center">
<div class="avatar">
<div class="w-20 rounded">
<img src="https://i.pravatar.cc/300?img=6" alt="Square avatar" />
</div>
</div>
<div class="avatar">
<div class="w-20 rounded-lg">
<img src="https://i.pravatar.cc/300?img=7" alt="Rounded avatar" />
</div>
</div>
<div class="avatar">
<div class="w-20 rounded-xl">
<img src="https://i.pravatar.cc/300?img=8" alt="More rounded avatar" />
</div>
</div>
<div class="avatar">
<div class="w-20 rounded-full">
<img src="https://i.pravatar.cc/300?img=9" alt="Circular avatar" />
</div>
</div>
</div>
</div>
<!-- Status Avatars -->
<div class="bg-white p-6 rounded-lg shadow-md">
<h2 class="text-xl font-semibold mb-4">Status Indicators</h2>
<div class="flex flex-wrap gap-4 items-center">
<div class="avatar avatar-online">
<div class="w-16 rounded-full">
<img src="https://i.pravatar.cc/300?img=10" alt="Online user" />
</div>
</div>
<div class="avatar avatar-offline">
<div class="w-16 rounded-full">
<img src="https://i.pravatar.cc/300?img=11" alt="Offline user" />
</div>
</div>
<div class="avatar avatar-away">
<div class="w-16 rounded-full">
<img src="https://i.pravatar.cc/300?img=12" alt="Away user" />
</div>
</div>
<div class="avatar avatar-busy">
<div class="w-16 rounded-full">
<img src="https://i.pravatar.cc/300?img=13" alt="Busy user" />
</div>
</div>
</div>
</div>
<!-- Placeholder Avatars -->
<div class="bg-white p-6 rounded-lg shadow-md">
<h2 class="text-xl font-semibold mb-4">Placeholder Avatars</h2>
<div class="flex flex-wrap gap-4 items-center">
<div class="avatar placeholder">
<div class="bg-gray-700 text-white w-16 rounded-full">
<span class="text-xl">JD</span>
</div>
</div>
<div class="avatar avatar-online placeholder">
<div class="bg-blue-600 text-white w-16 rounded-full">
<span class="text-xl">MK</span>
</div>
</div>
<div class="avatar placeholder">
<div class="bg-green-600 text-white w-16 rounded-full">
<span>TS</span>
</div>
</div>
<div class="avatar placeholder">
<div class="bg-red-600 text-white w-16 rounded-full">
<span class="text-xs">WB</span>
</div>
</div>
</div>
</div>
<!-- Avatar Groups -->
<div class="bg-white p-6 rounded-lg shadow-md col-span-full">
<h2 class="text-xl font-semibold mb-4">Avatar Groups</h2>
<div class="flex flex-col gap-6">
<div>
<h3 class="text-lg font-medium mb-2">Basic Group</h3>
<div class="avatar-group -space-x-4">
<div class="avatar">
<div class="w-12 rounded-full">
<img src="https://i.pravatar.cc/300?img=20" alt="User 1" />
</div>
</div>
<div class="avatar">
<div class="w-12 rounded-full">
<img src="https://i.pravatar.cc/300?img=21" alt="User 2" />
</div>
</div>
<div class="avatar">
<div class="w-12 rounded-full">
<img src="https://i.pravatar.cc/300?img=22" alt="User 3" />
</div>
</div>
<div class="avatar">
<div class="w-12 rounded-full">
<img src="https://i.pravatar.cc/300?img=23" alt="User 4" />
</div>
</div>
</div>
</div>
<div>
<h3 class="text-lg font-medium mb-2">Group with Counter</h3>
<div class="avatar-group -space-x-4">
<div class="avatar">
<div class="w-12 rounded-full">
<img src="https://i.pravatar.cc/300?img=24" alt="User 1" />
</div>
</div>
<div class="avatar">
<div class="w-12 rounded-full">
<img src="https://i.pravatar.cc/300?img=25" alt="User 2" />
</div>
</div>
<div class="avatar placeholder">
<div class="w-12 bg-gray-700 text-white rounded-full">
<span>+9</span>
</div>
</div>
</div>
</div>
<div>
<h3 class="text-lg font-medium mb-2">Mixed Group</h3>
<div class="avatar-group -space-x-4">
<div class="avatar avatar-online">
<div class="w-12 rounded-full">
<img src="https://i.pravatar.cc/300?img=26" alt="Online user" />
</div>
</div>
<div class="avatar avatar-offline">
<div class="w-12 rounded-full">
<img src="https://i.pravatar.cc/300?img=27" alt="Offline user" />
</div>
</div>
<div class="avatar placeholder">
<div class="w-12 bg-blue-600 text-white rounded-full">
<span>JM</span>
</div>
</div>
<div class="avatar placeholder">
<div class="w-12 bg-gray-700 text-white rounded-full">
<span>+5</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<style>
.avatar {
position: relative;
display: inline-flex;
}
.avatar > div {
display: block;
overflow: hidden;
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Avatar Group */
.avatar-group {
display: flex;
}
/* Placeholder styling */
.avatar.placeholder > div {
display: flex;
align-items: center;
justify-content: center;
}
/* Status indicators */
.avatar-online:after,
.avatar-offline:after,
.avatar-away:after,
.avatar-busy:after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 25%;
height: 25%;
border-radius: 50%;
border: 2px solid white;
transform: translate(0%, 0%);
z-index: 10;
}
.avatar-online:after {
background-color: #10b981; /* Green */
}
.avatar-offline:after {
background-color: #6b7280; /* Gray */
}
.avatar-away:after {
background-color: #f59e0b; /* Yellow */
}
.avatar-busy:after {
background-color: #ef4444; /* Red */
}
</style>
Copied to clipboard