Home
Nick Girga
Elegant Avatars

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 CSS v3. It is responsive. It supports dark mode.

Avatar

Author Nick Girga

274

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

Components

Author:
pablitodgb

3 months ago

258
chat ui advanced
Professional chat ui, connect me for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

9 months ago

1.3k
CTA block
with user avatars and 2 buttons

Author:
Carla Hoffman

1 year ago

2.3k
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

10 months ago

3.6k
Avatar group

Author:
Laurits

2 years ago

9.5k
Avatar Initial placeholder

Author:
Mr Robot

3 years ago

11.3k
Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Author:
Mike Varen

1 year ago

4k
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)

Author:
Ayyamperumal S

5 months ago

1.4k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

130
Divine Shree Ram Hero Section | Tailwind CSS Responsive UI for Devotional |Hero section |Hero
Explore a stunning and responsive Hero Section dedicated to Lord Ram, crafted with Tailwind CSS. Perfect for spiritual brands, Ramayana-inspired products, or devotional e-commerce platforms. Fully responsive, dark mode compatible, and animation-rich UI.

Author:
Rajesh Pandey

5 months ago

690
Basic user avatar box with text

Author:
Shakti

2 years ago

10.2k
Avatar with activity indicator
online indicator pulse animation

Author:
Prashant

3 years ago

9.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components