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

5.8k

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

User avatar group

Author:
JaxStone

1 year ago

13.3k
Profile Card
Show more details on hover

Author:
Tamani Phiri

1 year ago

11.9k
Basic user avatar box with text

Author:
Shakti

1 year ago

9.3k
Avatar Initial placeholder

Author:
Mr Robot

2 years ago

9.6k
User Profile
User Profile

Author:
Samuel Abera

9 months ago

6k
User Profile
User Profile

Author:
Samuel Abera

9 months ago

3.8k
Flex Profile
Tailwind Flex User Profile

Author:
Samuel Abera

9 months ago

3.1k
Avatar
Avatar

Author:
Samuel Abera

8 months ago

3k
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

2 months ago

1.1k
Profit Card
Profit card with deatils

Author:
dongol heart

3 weeks ago

298
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

2 weeks ago

313
profile page
This profile page design includes: 1. Responsive layout using Flexbox 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. Profile picture with hover effect 5. About Me section 6. Skills section with interactive tags 7. Contact information with icons 8. Edit Profile button 9. Subtle animations and transitions 10. Accessibility considerations (proper heading structure, color contrast) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The profile card has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - The profile picture has a border color that changes in dark mode - Skill tags have a hover effect that changes their color - Icons in the contact section use the theme colors - The Edit Profile button uses Indigo-800 with a Blue-900 hover state - Dark mode is automatically applied based on system preferences - The entire card fades in on load for a smooth entrance - The profile picture has a subtle scale effect on hover This design provides a clean, professional look while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

Author:
nejaa badr

1 month ago

751

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components