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

665

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 user avatars grid

Author:
Lukas Müller

3 years ago

11.9k
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.

Author:
Bonimater

10 months ago

998
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.

Author:
Lautaro Gómez

1 year ago

2.6k
Avatars - Htmlwind
Stacked avatars

Author:
Htmlwind

9 months ago

531
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

1 year ago

4.5k
canvas fully covers
canvas fully covers

Author:
Balogun David Olajuwon

10 months ago

1k
Latest Blog Card Components
Stay ahead of the curve with fresh content on code, design, startups, and everything in between.

Author:
Alif Bima Pradana

1 month ago

94
User Profile
User Profile

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

2 years ago

5.7k
Basic user avatar box with text

Author:
Shakti

2 years ago

10.6k
Responsive Pricing Table
can be used when you want to price

Author:
Bonimater

10 months ago

491
Shoe Card Grid
A responsive grid of three shoe cards with hover effects, featuring images, titles, descriptions, prices, and a "Shop Now" button.

Author:
Sudip chaudhary

9 months ago

540
card

Author:
pablitodgb

9 months ago

771

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components