Home
Mitch Chimwemwe Chanza
Stacked Profile

Stacked Profile

Stacked profile images

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

Avatar Profile

Author Mitch Chimwemwe Chanza

6.6k

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>

Related Examples