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

260

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