Home
Shakti
User ratings showcase section

User ratings showcase section

This tailwind example is contributed by Shakti, on 22-Feb-2023. Component is made with Tailwind CSS v3. similar terms for this example is Vote

Rating

Author Shakti

8.3k

Fork Fullscreen

<div class="max-w-screen-xl px-6 mx-auto mb-12 lg:px-8 xl:px-4 lg:mb-16 xl:mb-24">
    <div class="flex flex-col items-center justify-center">
        <div
            class="flex flex-col w-full px-4 py-4 space-y-4 border border-yellow-400 rounded-lg bg-yellow-100/50 lg:py-8 md:px-12 md:w-auto md:flex-row md:items-center md:space-x-4 lg:space-x-12">
            <div>
                <p class="text-lg font-bold text-gray-700 uppercase trakcing-wide lg:text-xl">4.9 Overall rating</p>
                <p class="text-base text-gray-600 lg:text-lg">Serving 3000 companies world wide</p>
            </div>
            <div class="flex space-x-2 text-yellow-400">
                <svg class="w-6 h-6" fill="currentColor" stroke="currentColor" viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z">
                    </path>
                </svg>
                <svg class="w-6 h-6" fill="currentColor" stroke="currentColor" viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z">
                    </path>
                </svg>
                <svg class="w-6 h-6" fill="currentColor" stroke="currentColor" viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z">
                    </path>
                </svg>
                <svg class="w-6 h-6" fill="currentColor" stroke="currentColor" viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z">
                    </path>
                </svg>
                <svg class="w-6 h-6" fill="currentColor" stroke="currentColor" viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z">
                    </path>
                </svg>
            </div>
        </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.6k
Star Rating

Author:
Gopi Yadav

3 years ago

12k
Emoji rating

Author:
Brandon D

2 years ago

12.4k
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

10 months ago

1.4k
Heart Shaped Rating Section

Author:
Gopi Yadav

3 years ago

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

Author:
Erik Hyatt

2 years ago

11.2k
Card
travel place card hover effect card

Author:
nahid hasan

7 months ago

1.4k
Show total ratings

Author:
Piet Vriend

2 years ago

9.9k
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.6k
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

6 months ago

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

Author:
Coastal UI

7 months ago

910

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components