Elegant Avatars

Useful Tailwind classes for constructing avatars with status markers. Comes with an example edit/preview avatar for the user to choose an image with the file chooser.

This tailwind example is contributed by Nick Girga, on 06-May-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Avatar

Author Nick Girga

Tailwind v3.4 1.1k 3

Fork Fullscreen

<div class="flex flex-col items-center gap-8 my-8">

<div class="flex flex-col items-center gap-4">
        <span class="text-2xl font-bold">Placeholder Avatars</span>
        <div class="flex flex-col sm:flex-row items-center gap-4">

<div class="avatar avatar-xs avatar-busy">
                <span class="text-xs">AB</span>
            </div>

<div class="avatar avatar-sm">
                <span class="text-2xl">CD</span>
            </div>

<div class="avatar avatar-online">
                <span class="text-4xl">NG</span>
            </div>

<div class="avatar avatar-lg">
                <span class="text-6xl">JC</span>
            </div>

</div>
    </div>

<div class="flex flex-col items-center gap-4">
        <span class="text-2xl font-bold">Square Avatars</span>
        <div class="flex flex-col sm:flex-row items-center gap-4">

<div class="avatar avatar-xs rounded-md">
                <span class="text-xs">BS</span>
            </div>

<div class="avatar avatar-sm avatar-online rounded-[0]">
                <span class="text-2xl">MC</span>
            </div>

<div class="avatar rounded-3xl avatar-away">
                <span class="text-4xl">DL</span>
            </div>

<div class="avatar avatar-lg rounded-[12mm]">
                <span class="text-6xl">GG</span>
            </div>

</div>
    </div>

<div class="flex flex-col items-center gap-4">
        <span class="text-2xl font-bold">Image Avatars</span>
        <div class="flex flex-col sm:flex-row items-center gap-4">

<div class="avatar avatar-xs">
                <img class="avatar-image"
                    src="https://images.unsplash.com/photo-1655874819398-c6dfbec68ac7" />
            </div>

<div class="avatar avatar-sm avatar-online">
                <img class="avatar-image"
                    src="https://images.unsplash.com/photo-1636631504829-15d682bd7d39" />
            </div>

<div class="avatar">
                <img class="avatar-image h-full -ml-12"
                    src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5" />
            </div>

<div class="avatar avatar-lg avatar-busy">
                <img class="avatar-image mt-12"
                    src="https://images.unsplash.com/photo-1494790108377-be9c29b29330" />
            </div>

</div>
    </div>

<div class="flex flex-col items-center gap-4">
        <span class="text-2xl font-bold">Edit Avatar</span>

<label class="avatar avatar-lg relative group">
            <input type="file" class="hidden" onchange="window.loadAvatarPreview(event)" />
            <div class="absolute w-full h-full bg-black/50 flex flex-col items-center justify-center opacity-50 md:opacity-0 group-hover:opacity-100 transition duration-500">
                <svg class="w-full p-8 opacity-50"
                    stroke-width="1.5"
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    color="currentColor">
                    <path
                        d="M21 3.6V20.4C21 20.7314 20.7314 21 20.4 21H3.6C3.26863 21 3 20.7314 3 20.4V3.6C3 3.26863 3.26863 3 3.6 3H20.4C20.7314 3 21 3.26863 21 3.6Z"
                        stroke="currentColor"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round">
                    </path>
                    <path
                        d="M3 16L10 13L21 18"
                        stroke="currentColor"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round">
                    </path>
                    <path
                        d="M16 10C14.8954 10 14 9.10457 14 8C14 6.89543 14.8954 6 16 6C17.1046 6 18 6.89543 18 8C18 9.10457 17.1046 10 16 10Z"
                        stroke="currentColor"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round">
                    </path>
                </svg>
            </div>
            <img id="avatar-preview" class="avatar-image"
                src="https://images.unsplash.com/photo-1527980965255-d3b416303d12" />
        </label>

</div>

<script>
    window.loadAvatarPreview = function(event) {
        const preview = document.getElementById('avatar-preview');
        let input = event.target;
        let file = input.files[0];
        preview.src = URL.createObjectURL(file);
        preview.onload = function() {
            URL.revokeObjectURL(preview.src);
        }
    }    
</script>

Related Examples

Responsive Pricing Table
can be used when you want to price

Bonimater

1 year ago

946
Avatars - Htmlwind
Stacked avatars

Htmlwind

1 year ago

1.2k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

5 months ago

481
Avatar
This Avatar component includes: 1. Responsive design using Tailwind CSS classes 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. User avatar with hover effect and online status indicator 5. User name and role 6. Follow button with hover effect 7. Follower count 8. Subtle animations and transitions 9. Accessibility considerations (proper contrast, focus states) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The avatar card has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - The avatar image has a border color that changes in dark mode - The avatar has a scale effect on hover and a ring appears around it - The Follow button uses Indigo-800 with a Blue-900 hover state - The card has a shadow effect that changes color on hover - Dark mode is automatically applied based on system preferences - The entire card has a subtle transition effect for smooth color changes - Proper focus states are implemented for the button This design provides a clean, interactive avatar component while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

nejaa badr

1 year ago

3k
Avatar Group

Mohit Prajapati

4 years ago

10.4k
User list
User list

Anonymous

1 year ago

975
Taskify Premium Task Management FREE
Website Task management modern and responsif

Alif Bima Pradana

8 months ago

837
Avatar Initial placeholder

Mr Robot

4 years ago

12.1k
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

ABDESLAMI ACHRAF

2 years ago

4.6k
Overlapped icons showcase
Al pasar el cursor sobre el ícono apilado, se revela el ícono completo. Hovering over the stacked icon unveils the complete icon.

Lautaro Gómez

2 years ago

3.4k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Ameth Galarcio

1 year ago

2.4k
Horizon Premium Dashboard Tailwind
Website Dashboard Admin with tailwind CSS CDN

Alif Bima Pradana

8 months ago

970