Home
Erik Hyatt
Product rating section

Product rating section

display star rating stats with user avatars

This tailwind example is contributed by Erik Hyatt, on 09-Jun-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is Vote

Avatar Rating

Author Erik Hyatt

11.5k

14

Fork Fullscreen

<div class="mt-10 flex items-center justify-center gap-x-6">
    <div class="hidden sm:block -space-x-2 overflow-hidden">
        <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
        <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
        <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2.25&amp;w=256&amp;h=256&amp;q=80" alt="">
        <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
        <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
    </div>
    <div class="boder-none sm:border-l-2 border-black sm:pl-8">
        <div class="flex justify-center sm:justify-start">
            <h3 class="text-2xl font-semibold mr-2">4.6</h3>

<img class="w-5" src="https://www.svgrepo.com/show/513354/star.svg" alt="stars-icon">
        </div>
        <div>
            <h3 class="text-sm">Rated by 25k on google.</h3>
        </div>
    </div>
</div>

Related Examples

Star rating svg buttons
buttons consist of star,star-filled, and star half-filled

Author:
Prajwal Hallale

3 years ago

11.3k
Rating stars

Author:
Bunny

3 years ago

13.8k
User avatar group

Author:
JaxStone

2 years ago

14.9k
Responsive user avatars grid

Author:
Lukas Müller

2 years ago

11.9k
Emoji rating

Author:
Brandon D

3 years ago

12.6k
Avatar group

Author:
Laurits

2 years ago

9.7k
Stacked Profile
Stacked profile images

Author:
Mitch Chimwemwe Chanza

2 years ago

7.5k
Responsive Pricing Table
can be used when you want to price

Author:
Bonimater

8 months ago

467
Avatar with Gradient Shadow

Author:
Prajwal Hallale

2 years ago

10.2k
CTA block
with user avatars and 2 buttons

Author:
Carla Hoffman

1 year ago

2.6k
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

1 year ago

4k
User avatar group

Author:
Samuel Dawson

3 years ago

11.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2026 TailwindFlex. All Rights Reserved.

v1.12