Stacked Profile

Stacked profile images

This tailwind example is contributed by Mitch Chimwemwe Chanza, on 08-Nov-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Author box, User information

Avatar Profile

Author Mitch Chimwemwe Chanza

Tailwind v3.4 8.1k 13

Fork Fullscreen

<section>
<section>
<div class="border flex rouned-md min-h-16 rounded-md px-4 py-2">
 <span class="rounded-full  bg-red-400 h-16 w-16 p-2 flex justify-center items-center border">MA</span>
 <span class="rounded-full -ml-6 z-20 bg-green-400 h-16 w-16 p-2 flex justify-center items-center border">GA</span>
 <span class="rounded-full  -ml-6 z-20 bg-gray-200  h-16 w-16 p-2 flex justify-center items-center border">CD</span>
 <span class="rounded-full  -ml-6 z-20 bg-blue-700  h-16 w-16 p-2 flex justify-center items-center border">CD</span>
 <span class="rounded-full  -ml-6 z-20 bg-green-800  h-16 w-16  flex justify-center items-center border">
   <img class="w-full h-full rounded-full" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHx1c2VyfGVufDB8MHx8fDE2OTk0NjA4OTV8MA&ixlib=rb-4.0.3&q=80&w=1080"/>
 </span>
 <span class="rounded-full  -ml-6 z-20 bg-blue-300  h-16 w-16 p-2 flex justify-center items-center border">YU</span>
 <span class="rounded-full  -ml-6 z-20 bg-purple-500  h-16 w-16 p-2 flex justify-center items-center border">IO</span>
 <span class="rounded-full  -ml-6 z-20 bg-blue-500  h-16 w-16 p-2 flex justify-center items-center border">CD</span>
 <span class="rounded-full  -ml-6 z-20 bg-yellow-500  h-16 w-16 p-2 flex justify-center items-center border">IO</span>
 <span class="rounded-full  -ml-6 z-20 bg-pink-500  h-16 w-16 flex justify-center items-center border">
    <img class="h-full w-full rounded-full" src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwzfHx1c2VyfGVufDB8MHx8fDE2OTk0NjA4OTV8MA&ixlib=rb-4.0.3&q=80&w=1080"/>
 </span>
 <span class="rounded-full  -ml-6 z-20 bg-indigo-500  h-16 w-16 p-2 flex justify-center items-center border">AS</span>
</div>
</section>
<section class="my-6">

<div class="border flex rouned-md min-h-16 rounded-md px-4 py-2">
 <span class="rounded-full  bg-red-400 h-8 w-8 sm:h-16 sm:w-16 p-2 flex justify-center items-center border">MA</span>
 <span class="rounded-full -ml-6 z-20 bg-green-400 h-8 w-8 sm:h-16 sm:w-16 p-2 flex justify-center items-center border">GA</span>
 <span class="rounded-full  -ml-6 z-20 bg-gray-200  h-8 w-8 sm:h-16 sm:w-16 p-2 flex justify-center items-center border">CD</span>
 <span class="rounded-full  -ml-6 z-20 bg-blue-700  h-8 w-8 sm:h-16 sm:w-16 flex justify-center items-center border">CD</span>
 <span class="rounded-full  -ml-6 z-20 bg-green-800 h-8 w-8 sm:h-16 sm:w-16  flex justify-center items-center border">
   <img class="w-full h-full rounded-full" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHx1c2VyfGVufDB8MHx8fDE2OTk0NjA4OTV8MA&ixlib=rb-4.0.3&q=80&w=1080"/>
 </span>
 <span class="rounded-full  -ml-6 z-20 bg-blue-300  h-8 w-8 sm:h-16 sm:w-16 flex justify-center items-center border">YU</span>
 <span class="rounded-full  -ml-6 z-20 bg-purple-500 h-8 w-8 sm:h-16 sm:w-16 flex justify-center items-center border">IO</span>
 <span class="rounded-full  -ml-6 z-20 bg-blue-500  h-8 w-8 sm:h-16 sm:w-16 flex justify-center items-center border">CD</span>
 <span class="rounded-full  -ml-6 z-20 bg-yellow-500  h-8 w-8 sm:h-16 sm:w-16 flex justify-center items-center border">IO</span>
 <span class="rounded-full  -ml-6 z-20 bg-pink-500 h-8 w-8 sm:h-16 sm:w-16 justify-center items-center border">
    <img class="h-full w-full rounded-full" src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwzfHx1c2VyfGVufDB8MHx8fDE2OTk0NjA4OTV8MA&ixlib=rb-4.0.3&q=80&w=1080"/>
 </span>
 <span class="rounded-full  -ml-6 z-20 bg-indigo-500  h-8 w-8 sm:h-16 sm:w-16 flex justify-center items-center border">AS</span>
 <span class="rounded-full text-white -ml-6 z-20 bg-green-500  h-8  sm:px-2 px-2 py-0 sm:h-14 sm:w6 flex justify-center items-center border">+20 Other Supportters</span>
</div>
</section>
</section>