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

Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Ayyamperumal S

1 year ago

2.9k
User avatar group

Samuel Dawson

3 years ago

12.4k
Avatars - Htmlwind
Stacked avatars

Htmlwind

1 year ago

1.2k
Stylish Mobile-First Navigation Bar Using Tailwind
This project showcases a sleek, fixed-top responsive navigation bar crafted with Tailwind CSS. Featuring a vibrant gradient background, a bold uppercase logo, and smooth pink hover effects, it adapts beautifully across devices. On desktop, the navigation links appear horizontally with ample spacing, while on mobile, a hamburger menu toggles a stylish dropdown with rounded corners and subtle shadows. The navbar’s semi-transparent backdrop with blur adds a modern glassmorphism touch, making it perfect for contemporary web designs.

Bonimater

1 year ago

1.6k
User Avatars

Sophia Baker

3 years ago

12.1k
Product rating section
display star rating stats with user avatars

Erik Hyatt

3 years ago

11.9k
Intelligent AI tools built to help.
Unlock smarter workflows with AI tools designed to boost productivity, simplify tasks and help you do more with less effort.

Alif Bima Pradana

7 months ago

613
Horizon Premium Dashboard Tailwind
Website Dashboard Admin with tailwind CSS CDN

Alif Bima Pradana

7 months ago

946
Ripple Animation

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.3k
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.3k
Food delivery ecommerce Card

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.8k