Avatar Group

This tailwind example is contributed by Mohit Prajapati, on 04-Aug-2022. Component is made with Tailwind v3.4.

Avatar

Author Mohit Prajapati

Tailwind v3.4 10.4k 14

Fork Fullscreen

<div class="flex flex-row-reverse justify-end -space-x-3 space-x-reverse">
  <div
    class="relative flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
    <img
      class="h-full w-full rounded-full object-cover object-center"
      src="https://source.boringavatars.com/beam/5?square" />
  </div>
  <div
    class="relative flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
    <img
      class="h-full w-full rounded-full object-cover object-center"
      src="https://source.boringavatars.com/beam/6?square" />
  </div>
  <div
    class="relative flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
    <img
      class="h-full w-full rounded-full object-cover object-center"
      src="https://source.boringavatars.com/beam/7?square" />
  </div>
  <div
    class="relative flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
    <img
      class="h-full w-full rounded-full object-cover object-center"
      src="https://source.boringavatars.com/beam/8?square" />
  </div>
</div>

Related Examples

User avatar group

JaxStone

3 years ago

15.6k
User avatar group

Samuel Dawson

3 years ago

12.5k
Ripple Animation

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.3k
Shoe Card Grid
A responsive grid of three shoe cards with hover effects, featuring images, titles, descriptions, prices, and a "Shop Now" button.

Sudip chaudhary

1 year ago

942
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Ameth Galarcio

1 year ago

2.4k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

5 months ago

481
Taskify Premium Task Management FREE
Website Task management modern and responsif

Alif Bima Pradana

8 months ago

837
Responsive user avatars grid

Lukas Müller

3 years ago

12.2k
Flex Profile
Tailwind Flex User Profile

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

4.8k
Components

pablitodgb

1 year ago

1k
CTA block
with user avatars and 2 buttons

Carla Hoffman

2 years ago

3.2k
Basic user avatar box with text

Shakti

3 years ago

11k

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.