Avtar Cards

this is cards, for the profile section

This tailwind example is contributed by pablitodgb, on 19-Jun-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Author box, User information

Author pablitodgb

Tailwind v3.4 774 4

Fork Fullscreen

<div class="h-screen min-w-1/3 w-auto max-w-screen p-1 m-1 rounded-md bg-gray-100 dark:bg-gray-500 flex justify-center items-center">
  <div class=" p-2 m-auto bg-gray-200 dark:bg-gray-600 shadow-lg shadow-slate-500/50 dark:shadow-cyan-500/50 rounded-md w-[18rem] h-[11rem] px-6 bg-blur-sm">
  <div class="relative">
    <img src="https://images.unsplash.com/photo-1502323777036-f29e3972d82f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw5fHxwcm9maWxlfGVufDB8MHx8fDE3NTA1MDA4MDB8MA&ixlib=rb-4.1.0&q=80&w=1080" alt="#" class="size-40 rounded-full z-0 border border-3 border-blue-300 ring-2 object-fill absolute left-0 shadow-lg shadow-cyan-500/50 object-fill"/>
    <img src="https://images.unsplash.com/photo-1466112928291-0903b80a9466?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw1fHxwcm9maWxlfGVufDB8MHx8fDE3NTA1MDA4MDB8MA&ixlib=rb-4.1.0&q=80&w=1080" alt="#" class="size-40 rounded-full z-10 border border-3 border-pink-300 ring-2 object-fill absolute left-6 shadow-lg shadow-pink-500/50 object-fill"/>
    <img src="https://images.unsplash.com/photo-1534308143481-c55f00be8bd7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw2fHxwcm9maWxlfGVufDB8MHx8fDE3NTA1MDA4MDB8MA&ixlib=rb-4.1.0&q=80&w=1080" alt="#" class="size-40 rounded-full z-20 border border-3 border-green-300 ring-2 object-fill absolute left-12 shadow-lg shadow-green-500/50 object-fill"/>
    <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwyfHxwcm9maWxlfGVufDB8MHx8fDE3NTA1MDA4MDB8MA&ixlib=rb-4.1.0&q=80&w=1080" alt="#" class="size-40 rounded-full z-30 border border-3 border-red-300 ring-2 object-fill absolute left-20 shadow-lg shadow-red-500/50 object-fill"/>
  </div>
  </div>
</div>

Related Examples

Profile card
Profile card with social icons

Krishna Gudpalle

4 years ago

13.6k
User Profile Card
The card features a user's profile picture, name, location, and options for interactions. It has a clean and modern design with rounded edges and icons for user engagement. It also has support for dark mod:

Prashant

4 years ago

65.5k
User profile card with Cover Image

Noob

3 years ago

33.8k
User Profile Card
Useful for testimonials and reviews section

Abhijit Sen

3 years ago

11.2k
Minimal Profile card

Abhijit Sen

3 years ago

12.3k
Responsive user card with tailwind

Gopi Yadav

3 years ago

11.9k
Author box

Mr Robot

3 years ago

12.5k
Profile card

Mr Robot

3 years ago

13.4k
User profile card

Mr Robot

3 years ago

11.9k
Testimonial card with image

Simon Scheffer

3 years ago

12.8k
Profile Card
Show more details on hover

Tamani Phiri

3 years ago

15.2k
Author card
Author card for giving credit to the author of the Blog/Article. It has social media icons and user image

Prajwal Hallale

3 years ago

7.6k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.