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.9k
User avatar group

Author:
JaxStone

3 years ago

15k
Responsive user avatars grid

Author:
Lukas Müller

3 years ago

11.9k
Emoji rating

Author:
Brandon D

3 years ago

12.7k
Avatar group

Author:
Laurits

3 years ago

9.7k
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

1 year ago

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

Author:
Bonimater

9 months ago

488
Avatars - Htmlwind
Stacked avatars

Author:
Htmlwind

9 months ago

530
Avatar Group

Author:
Mohit Prajapati

3 years ago

10k
chat ui advanced
Professional chat ui, connect me for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

1 year ago

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

Author:
Ameth Galarcio

1 year ago

1.9k

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