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

10.6k

11

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

10.9k
Rating stars

Author:
Bunny

2 years ago

12.3k
User avatar group

Author:
JaxStone

1 year ago

13.6k
Responsive user avatars grid

Author:
Lukas Müller

1 year ago

10.9k
Emoji rating

Author:
Brandon D

2 years ago

11.3k
Avatar group

Author:
Laurits

1 year ago

8.4k
Avatar Group

Author:
Mohit Prajapati

2 years ago

8.9k
User avatar with name

Author:
Bunny

1 year ago

7.8k
Basic user avatar box with text

Author:
Shakti

1 year ago

9.5k
Food delivery ecommerce Card

Author:
Samuel Abera

3 weeks ago

370
User review form
Write a review form star rating form

Author:
Quentin Rivers

3 months ago

792
Profit Card
Profit card with deatils

Author:
dongol heart

2 months ago

479

Explore components by Tags

Didn't find component you were looking for?

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

© 2025 TailwindFlex. All Rights Reserved.

v1.1