Home
Bunny
Rating stars

Rating stars

This tailwind example is contributed by Bunny, on 19-Jan-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is Vote

Rating

Author Bunny

13.8k

12

Fork Fullscreen

<div class="flex gap-0.5">
    <svg class="h-8 w-8 shrink-0 fill-amber-400" viewBox="0 0 256 256">
        <path
            d="M239.2 97.4A16.4 16.4.0 00224.6 86l-59.4-4.1-22-55.5A16.4 16.4.0 00128 16h0a16.4 16.4.0 00-15.2 10.4L90.4 82.2 31.4 86A16.5 16.5.0 0016.8 97.4 16.8 16.8.0 0022 115.5l45.4 38.4L53.9 207a18.5 18.5.0 007 19.6 18 18 0 0020.1.6l46.9-29.7h.2l50.5 31.9a16.1 16.1.0 008.7 2.6 16.5 16.5.0 0015.8-20.8l-14.3-58.1L234 115.5A16.8 16.8.0 00239.2 97.4z">
        </path>
    </svg>
    <svg class="h-8 w-8 shrink-0 fill-amber-400" viewBox="0 0 256 256">
        <path
            d="M239.2 97.4A16.4 16.4.0 00224.6 86l-59.4-4.1-22-55.5A16.4 16.4.0 00128 16h0a16.4 16.4.0 00-15.2 10.4L90.4 82.2 31.4 86A16.5 16.5.0 0016.8 97.4 16.8 16.8.0 0022 115.5l45.4 38.4L53.9 207a18.5 18.5.0 007 19.6 18 18 0 0020.1.6l46.9-29.7h.2l50.5 31.9a16.1 16.1.0 008.7 2.6 16.5 16.5.0 0015.8-20.8l-14.3-58.1L234 115.5A16.8 16.8.0 00239.2 97.4z">
        </path>
    </svg>
    <svg class="h-8 w-8 shrink-0 fill-amber-400" viewBox="0 0 256 256">
        <path
            d="M239.2 97.4A16.4 16.4.0 00224.6 86l-59.4-4.1-22-55.5A16.4 16.4.0 00128 16h0a16.4 16.4.0 00-15.2 10.4L90.4 82.2 31.4 86A16.5 16.5.0 0016.8 97.4 16.8 16.8.0 0022 115.5l45.4 38.4L53.9 207a18.5 18.5.0 007 19.6 18 18 0 0020.1.6l46.9-29.7h.2l50.5 31.9a16.1 16.1.0 008.7 2.6 16.5 16.5.0 0015.8-20.8l-14.3-58.1L234 115.5A16.8 16.8.0 00239.2 97.4z">
        </path>
    </svg>
    <svg class="h-8 w-8 shrink-0 fill-gray-300" viewBox="0 0 256 256">
        <path
            d="M239.2 97.4A16.4 16.4.0 00224.6 86l-59.4-4.1-22-55.5A16.4 16.4.0 00128 16h0a16.4 16.4.0 00-15.2 10.4L90.4 82.2 31.4 86A16.5 16.5.0 0016.8 97.4 16.8 16.8.0 0022 115.5l45.4 38.4L53.9 207a18.5 18.5.0 007 19.6 18 18 0 0020.1.6l46.9-29.7h.2l50.5 31.9a16.1 16.1.0 008.7 2.6 16.5 16.5.0 0015.8-20.8l-14.3-58.1L234 115.5A16.8 16.8.0 00239.2 97.4z">
        </path>
    </svg>
    <svg class="h-8 w-8 shrink-0 fill-gray-300" viewBox="0 0 256 256">
        <path
            d="M239.2 97.4A16.4 16.4.0 00224.6 86l-59.4-4.1-22-55.5A16.4 16.4.0 00128 16h0a16.4 16.4.0 00-15.2 10.4L90.4 82.2 31.4 86A16.5 16.5.0 0016.8 97.4 16.8 16.8.0 0022 115.5l45.4 38.4L53.9 207a18.5 18.5.0 007 19.6 18 18 0 0020.1.6l46.9-29.7h.2l50.5 31.9a16.1 16.1.0 008.7 2.6 16.5 16.5.0 0015.8-20.8l-14.3-58.1L234 115.5A16.8 16.8.0 00239.2 97.4z">
        </path>
    </svg>
</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
Star Rating

Author:
Gopi Yadav

3 years ago

12.4k
Heart Shaped Rating Section

Author:
Gopi Yadav

3 years ago

13.2k
Emoji rating

Author:
Brandon D

3 years ago

12.7k
User ratings showcase section

Author:
Shakti

3 years ago

8.5k
Product rating section
display star rating stats with user avatars

Author:
Erik Hyatt

2 years ago

11.5k
Show total ratings

Author:
Piet Vriend

3 years ago

10.4k
Responsive Pricing Table with Toggle Switch — Built with Tailwind Flex
A clean, responsive Pricing Table UI built entirely with Tailwind CSS and Flexbox. Includes a smooth monthly/yearly toggle switch, fully mobile-friendly layout, and modern design — perfect for SaaS, startups, freelancers, or any web project. 📱 100% Responsive 🎯 Easily customizable 💡 Ideal for client or personal projects

Author:
Muhammad Umair Arshad

10 months ago

955
Super input radio card
card input radio simple input card input design awesome card design rounded black shadow blue border gray icon card radio option HTML CSS select JavaScript dropdown

Author:
ROHIT RAJPUT

1 year ago

1.9k
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

10 months ago

810
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Author:
Coastal UI

1 year ago

1k
Rating with text
you also want to show a text near the stars you can use this example as a reference. @zobaidulkazi

Author:
zobaidul kaziex

1 year ago

1.7k

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