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.2k

13

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

2 years ago

11.2k
Rating stars

Author:
Bunny

2 years ago

13.5k
User avatar group

Author:
JaxStone

2 years ago

14.7k
Responsive user avatars grid

Author:
Lukas Müller

2 years ago

11.5k
Emoji rating

Author:
Brandon D

2 years ago

12.4k
Avatar group

Author:
Laurits

2 years ago

9.4k
User Profile
User Profile

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

5.1k
canvas fully covers
canvas fully covers

Author:
Balogun David Olajuwon

4 months ago

612
Avatar Group

Author:
Mohit Prajapati

3 years ago

9.8k
User ratings showcase section

Author:
Shakti

2 years ago

8.3k
User Avatars

Author:
Sophia Baker

2 years ago

10.8k
CTA block
with user avatars and 2 buttons

Author:
Carla Hoffman

1 year ago

2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ 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

© 2025 TailwindFlex. All Rights Reserved.

v1.1