Avatar
A sleek, customizable Avatar component crafted with TailwindCSS for clear, responsive, and visually appealing user profile images.
Example
example.tsx
export function Avatar() {
return (
<div className="flex items-center space-x-3">
{/* Small */}
<img className="cursor-pointer object-cover size-8 rounded-full" src="https://cataas.com/cat?width=300&height=300" alt="profile" />
{/* Medium */}
<img className="cursor-pointer object-cover size-12 rounded-full" src="https://cataas.com/cat?width=300&height=300" alt="profile" />
{/* Large */}
<img className="cursor-pointer object-cover size-16 rounded-full" src="https://cataas.com/cat?width=300&height=300" alt="profile" />
</div>
)
}Avatar with status
A polished Avatar component with integrated status indicators, using TailwindCSS, offering clear, responsive, and visually appealing user profile images with activity status displayed as colored dots.
Example
example.tsx
export function Avatar() {
return (
<div className="flex items-center space-x-3">
{/* Online */}
<div className="relative cursor-pointer size-16">
<img className="ring-2 ring-[#404040] object-cover rounded-full" src="https://cataas.com/cat?width=300&height=300" alt="profile" />
<div className="absolute rounded-full size-4 ring-1 ring-[#141414] bg-[#4BB543] bottom-0 right-0"></div>
</div>
{/* Idle */}
<div className="relative cursor-pointer size-16">
<img className="ring-2 ring-[#404040] object-cover rounded-full" src="https://cataas.com/cat?width=300&height=300" alt="profile" />
<div className="absolute rounded-full size-4 ring-1 ring-[#141414] bg-[#FBC02D] bottom-0 right-0"></div>
</div>
{/* Do not disturb */}
<div className="relative cursor-pointer size-16">
<img className="ring-2 ring-[#404040] object-cover rounded-full" src="https://cataas.com/cat?width=300&height=300" alt="profile" />
<div className="absolute rounded-full size-4 ring-1 ring-[#141414] bg-[#D32F2F] bottom-0 right-0"></div>
</div>
</div>
)
}Text avatar
A concise Text Avatar component with initials, using TailwindCSS, offering clear, responsive, and visually appealing representations in user profiles.
Example
MU
MU
MU
example.tsx
export function Avatar() {
return (
<div className="flex items-center space-x-3">
{/* Small */}
<div className="flex items-center justify-center p-2 cursor-pointer size-8 bg-gray-300 rounded-full select-none">
<span className="text-base text-gray-600 font-semibold">MU</span>
</div>
{/* Medium */}
<div className="flex items-center justify-center p-2 cursor-pointer size-12 bg-gray-300 rounded-full select-none">
<span className="text-2xl text-gray-600 font-semibold">MU</span>
</div>
{/* Large */}
<div className="flex items-center justify-center p-2 cursor-pointer size-16 bg-gray-300 rounded-full select-none">
<span className="text-3xl text-gray-600 font-semibold">MU</span>
</div>
</div>
)
}
