Avatar Components: Taco Component Library

Avatar rounded

<div class="w-12 h-12 before:bg-gradient-to-br before:from-indigo-500 before:to-pink-600 relative isolate before:w-[110%] before:h-[110%] before:absolute before:rounded-full before:inset-0 before:-translate-x-[5%] before:-translate-y-[5%] before:-z-10 shrink-0">
    <img class="w-full aspect-square rounded-full object-cover z-30 relative"
        src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&q=80" alt="" />
</div>

<div class="w-14 h-14 before:bg-gradient-to-br before:from-indigo-500 before:to-pink-600 relative isolate before:w-[110%] before:h-[110%] before:absolute before:rounded-full before:inset-0 before:-translate-x-[5%] before:-translate-y-[5%] before:-z-10 shrink-0">
    <img class="w-full aspect-square rounded-full object-cover z-30 relative"
        src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&q=80" alt="" />
</div>

<div class="w-16 h-16 before:bg-gradient-to-br before:from-indigo-500 before:to-pink-600 relative isolate before:w-[110%] before:h-[110%] before:absolute before:rounded-full before:inset-0 before:-translate-x-[5%] before:-translate-y-[5%] before:-z-10 shrink-0">
    <img class="w-full aspect-square rounded-full object-cover z-30 relative"
        src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&q=80" alt="" />
</div>

<div class="w-20 h-20 before:bg-gradient-to-br before:from-indigo-500 before:to-pink-600 relative isolate before:w-[110%] before:h-[110%] before:absolute before:rounded-full before:inset-0 before:-translate-x-[5%] before:-translate-y-[5%] before:-z-10 shrink-0">
    <img class="w-full aspect-square rounded-full object-cover z-30 relative"
        src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&q=80" alt="" />
</div>

Avatars stacked

<div class="flex -space-x-3">
    <div class="w-12 h-12 before:bg-white relative isolate before:w-[110%] before:h-[110%] before:absolute before:rounded-full before:inset-0 before:-translate-x-[5%] before:-translate-y-[5%] before:-z-10">
        <img class="w-full aspect-square rounded-full object-cover z-30 relative"
            src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&q=80" alt="" />
    </div>
    <div class="w-12 h-12 before:bg-white relative isolate before:w-[110%] before:h-[110%] before:absolute before:rounded-full before:inset-0 before:-translate-x-[5%] before:-translate-y-[5%] before:-z-10">
        <img class="w-full aspect-square rounded-full object-cover z-30 relative"
            src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&q=80" alt="" />
    </div>
    <div class="w-12 h-12 before:bg-white relative isolate before:w-[110%] before:h-[110%] before:absolute before:rounded-full before:inset-0 before:-translate-x-[5%] before:-translate-y-[5%] before:-z-10">
        <img class="w-full aspect-square rounded-full object-cover z-30 relative"
            src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&q=80" alt="" />
    </div>
    <div class="w-12 h-12 before:bg-white relative isolate before:w-[110%] before:h-[110%] before:absolute before:rounded-full before:inset-0 before:-translate-x-[5%] before:-translate-y-[5%] before:-z-10">
        <img class="w-full aspect-square rounded-full object-cover z-30 relative"
            src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&q=80" alt="" />
    </div>
</div>

Avatar with notification dot

<div class="w-12 h-12 before:bg-gradient-to-br before:from-indigo-500 before:to-pink-600 relative isolate before:w-[110%] before:h-[110%] before:absolute before:rounded-full before:inset-0 before:-translate-x-[5%] before:-translate-y-[5%] before:-z-10 shrink-0">
    <img class="w-full aspect-square rounded-full object-cover z-30 relative"
        src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&q=80" alt="" />
    <span class="w-2 absolute bottom-0 right-1 aspect-square bg-emerald-500 rounded-full z-30 ring-1 ring-white ring-offset-1"></span>
</div>

<div class="w-14 h-14 before:bg-gradient-to-br before:from-indigo-500 before:to-pink-600 relative isolate before:w-[110%] before:h-[110%] before:absolute before:rounded-full before:inset-0 before:-translate-x-[5%] before:-translate-y-[5%] before:-z-10 shrink-0">
    <img class="w-full aspect-square rounded-full object-cover z-30 relative"
        src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&q=80" alt="" />
    <span class="w-2.5 absolute bottom-0 right-1 aspect-square bg-emerald-500 rounded-full z-30 ring-1 ring-white ring-offset-1"></span>
</div>

<div class="w-16 h-16 before:bg-gradient-to-br before:from-indigo-500 before:to-pink-600 relative isolate before:w-[110%] before:h-[110%] before:absolute before:rounded-full before:inset-0 before:-translate-x-[5%] before:-translate-y-[5%] before:-z-10 shrink-0">
    <img class="w-full aspect-square rounded-full object-cover z-30 relative"
        src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&q=80" alt="" />
    <span class="w-3 absolute bottom-0 right-1 aspect-square bg-emerald-500 rounded-full z-30 ring-1 ring-white ring-offset-1"></span>
</div>

<div class="w-20 h-20 before:bg-gradient-to-br before:from-indigo-500 before:to-pink-600 relative isolate before:w-[110%] before:h-[110%] before:absolute before:rounded-full before:inset-0 before:-translate-x-[5%] before:-translate-y-[5%] before:-z-10 shrink-0">
    <img class="w-full aspect-square rounded-full object-cover z-30 relative"
        src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&q=80" alt="" />
    <span class="w-3.5 absolute bottom-0 right-1 aspect-square bg-emerald-500 rounded-full z-30 ring-1 ring-white ring-offset-1"></span>
</div>

Avatar - animated gradient on hover

<!--GRADIENT 1  -->
<div class="flex gap-5 items-center">
    <div class="w-10 h-10 before:bg-gradient-to-r before:from-indigo-500 before:from-10% before:via-sky-500 before:via-30% before:to-emerald-500 before:to-90% hover:before:rotate-180 before:transition-transform before:duration-[2000ms] relative isolate before:w-[110%] before:h-[110%] before:absolute before:rounded-full before:inset-0 before:-translate-x-[5%] before:-translate-y-[5%] before:-z-10">
        <img class="w-full aspect-square rounded-full object-cover z-30 relative"
            src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&q=80" alt="" />
    </div>

    <div class="w-14 h-14 before:bg-gradient-to-r before:from-indigo-500 before:from-10% before:via-sky-500 before:via-30% before:to-emerald-500 before:to-90% hover:before:rotate-180 before:transition-transform before:duration-[2000ms] relative isolate before:w-[110%] before:h-[110%] before:absolute before:rounded-full before:inset-0 before:-translate-x-[5%] before:-translate-y-[5%] before:-z-10">
        <img class="w-full aspect-square rounded-full object-cover z-30 relative"
            src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&q=80" alt="" />
    </div>
    <div class="w-16 h-16 before:bg-gradient-to-r before:from-indigo-500 before:from-10% before:via-sky-500 before:via-30% before:to-emerald-500 before:to-90% hover:before:rotate-180 before:transition-transform before:duration-[2000ms] relative isolate before:w-[110%] before:h-[110%] before:absolute before:rounded-full before:inset-0 before:-translate-x-[5%] before:-translate-y-[5%] before:-z-10">
        <img class="w-full aspect-square rounded-full object-cover z-30 relative"
            src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&q=80" alt="" />
    </div>
    <div class="w-20 h-20 before:bg-gradient-to-r before:from-indigo-500 before:from-10% before:via-sky-500 before:via-30% before:to-emerald-500 before:to-90% hover:before:rotate-180 before:transition-transform before:duration-[2000ms] relative isolate before:w-[110%] before:h-[110%] before:absolute before:rounded-full before:inset-0 before:-translate-x-[5%] before:-translate-y-[5%] before:-z-10">
        <img class="w-full aspect-square rounded-full object-cover z-30 relative"
            src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&q=80" alt="" />
    </div>
</div>
<!-- YELLOW -->
<div class="flex gap-5 items-center">
    <div class="w-10 h-10 before:bg-amber-300 relative isolate before:w-[110%] before:h-[110%] before:absolute before:rounded-full before:inset-0 before:-translate-x-[5%] before:-translate-y-[5%] before:-z-10">
        <img class="w-full aspect-square rounded-full object-cover z-30 relative"
            src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&q=80" alt="" />
    </div>

    <div class="w-12 h-12 before:bg-amber-300 relative isolate before:w-[110%] before:h-[110%] before:absolute before:rounded-full before:inset-0 before:-translate-x-[5%] before:-translate-y-[5%] before:-z-10">
        <img class="w-full aspect-square rounded-full object-cover z-30 relative"
            src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&q=80" alt="" />
    </div>

    <div class="w-16 h-16 before:bg-amber-300 relative isolate before:w-[110%] before:h-[110%] before:absolute before:rounded-full before:inset-0 before:-translate-x-[5%] before:-translate-y-[5%] before:-z-10">
        <img class="w-full aspect-square rounded-full object-cover z-30 relative"
            src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&q=80" alt="" />
    </div>

    <div class="w-20 h-20 before:bg-amber-300 relative isolate before:w-[110%] before:h-[110%] before:absolute before:rounded-full before:inset-0 before:-translate-x-[5%] before:-translate-y-[5%] before:-z-10">
        <img class="w-full aspect-square rounded-full object-cover z-30 relative"
            src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&q=80" alt="" />
    </div>
</div>
<!-- GREEN -->
<div class="flex gap-5 items-center">
    <div class="w-10 h-10 before:bg-emerald-400 relative isolate before:w-[110%] before:h-[110%] before:absolute before:rounded-full before:inset-0 before:-translate-x-[5%] before:-translate-y-[5%] before:-z-10">
        <img class="w-full aspect-square rounded-full object-cover z-30 relative"
            src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&q=80" alt="" />
    </div>

    <div class="w-14 h-14 before:bg-emerald-400 relative isolate before:w-[110%] before:h-[110%] before:absolute before:rounded-full before:inset-0 before:-translate-x-[5%] before:-translate-y-[5%] before:-z-10">
        <img class="w-full aspect-square rounded-full object-cover z-30 relative"
            src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&q=80" alt="" />
    </div>

    <div class="w-16 h-16 before:bg-emerald-400 relative isolate before:w-[110%] before:h-[110%] before:absolute before:rounded-full before:inset-0 before:-translate-x-[5%] before:-translate-y-[5%] before:-z-10">
        <img class="w-full aspect-square rounded-full object-cover z-30 relative"
            src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&q=80" alt="" />
    </div>

    <div class="w-20 h-20 before:bg-emerald-400 relative isolate before:w-[110%] before:h-[110%] before:absolute before:rounded-full before:inset-0 before:-translate-x-[5%] before:-translate-y-[5%] before:-z-10">
        <img class="w-full aspect-square rounded-full object-cover z-30 relative"
            src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&q=80" alt="" />
    </div>
</div>
<!-- GRADIENT 2 -->
<div class="flex gap-5 items-center">
    <div class="w-10 h-10 before:bg-gradient-to-br before:from-indigo-500 before:to-pink-600 hover:before:rotate-180 before:transition-transform before:duration-[2000ms] relative isolate before:w-[110%] before:h-[110%] before:absolute before:rounded-full before:inset-0 before:-translate-x-[5%] before:-translate-y-[5%] before:-z-10">
        <img class="w-full aspect-square rounded-full object-cover z-30 relative"
            src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&q=80" alt="" />
    </div>

    <div class="w-14 h-14 before:bg-gradient-to-br before:from-indigo-500 before:to-pink-600 hover:before:rotate-180 before:transition-transform before:duration-[2000ms] relative isolate before:w-[110%] before:h-[110%] before:absolute before:rounded-full before:inset-0 before:-translate-x-[5%] before:-translate-y-[5%] before:-z-10">
        <img class="w-full aspect-square rounded-full object-cover z-30 relative"
            src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&q=80" alt="" />
    </div>

    <div class="w-16 h-16 before:bg-gradient-to-br before:from-indigo-500 before:to-pink-600 hover:before:rotate-180 before:transition-transform before:duration-[2000ms] relative isolate before:w-[110%] before:h-[110%] before:absolute before:rounded-full before:inset-0 before:-translate-x-[5%] before:-translate-y-[5%] before:-z-10">
        <img class="w-full aspect-square rounded-full object-cover z-30 relative"
            src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&q=80" alt="" />
    </div>

    <div class="w-20 h-20 before:bg-gradient-to-br before:from-indigo-500 before:to-pink-600 hover:before:rotate-180 before:transition-transform before:duration-[2000ms] relative isolate before:w-[110%] before:h-[110%] before:absolute before:rounded-full before:inset-0 before:-translate-x-[5%] before:-translate-y-[5%] before:-z-10">
        <img class="w-full aspect-square rounded-full object-cover z-30 relative"
            src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&q=80" alt="" />
    </div>
</div>

Avatar curved

<!SMALL  -->
<div class="w-12 h-12 before:bg-gradient-to-br before:from-indigo-500 before:to-pink-600 relative isolate before:w-[110%] before:h-[110%] before:absolute before:rounded-lg before:inset-0 before:-translate-x-[5%] before:-translate-y-[5%] before:-z-10">
    <img class="w-full aspect-square rounded-lg object-cover z-30 relative"
        src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&q=80" alt="" />
</div>

<!--MEDIUM  -->
<div class="w-14 h-14 before:bg-gradient-to-br before:from-indigo-500 before:to-pink-600 relative isolate before:w-[110%] before:h-[110%] before:absolute before:rounded-lg before:inset-0 before:-translate-x-[5%] before:-translate-y-[5%] before:-z-10">
    <img class="w-full aspect-square rounded-lg object-cover z-30 relative"
        src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&q=80" alt="" />
</div>
<!--LARGE  -->
<div class="w-16 h-16 before:bg-gradient-to-br before:from-indigo-500 before:to-pink-600 relative isolate before:w-[110%] before:h-[110%] before:absolute before:rounded-lg before:inset-0 before:-translate-x-[5%] before:-translate-y-[5%] before:-z-10">
    <img class="w-full aspect-square rounded-lg object-cover z-30 relative"
        src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&q=80" alt="" />
</div>

<!--Extra Large  -->
<div class="w-20 h-20 before:bg-gradient-to-br before:from-indigo-500 before:to-pink-600 relative isolate before:w-[110%] before:h-[110%] before:absolute before:rounded-lg before:inset-0 before:-translate-x-[5%] before:-translate-y-[5%] before:-z-10">
    <img class="w-full aspect-square rounded-lg object-cover z-30 relative"
        src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&q=80" alt="" />
</div>