User product review card

This tailwind example is contributed by Brandon D, on 12-Jun-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are endorsement,review

Testimonial

Author Brandon D

Tailwind v3.4 15k 13

Fork Fullscreen

<div class="text-violet-500 flex gap-2">
        <svg xmlns="http://www.w3.org/2000/svg" class="text-violet-500" width="20" height="20" viewBox="0 0 24 24"
            stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path
                d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z">
            </path>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" class="text-violet-500" width="20" height="20" viewBox="0 0 24 24"
            stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path
                d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z">
            </path>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" class="text-violet-500" width="20" height="20" viewBox="0 0 24 24"
            stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path
                d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z">
            </path>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" class="text-violet-500" width="20" height="20" viewBox="0 0 24 24"
            stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path
                d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z">
            </path>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" class="text-violet-500" width="20" height="20" viewBox="0 0 24 24"
            stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path
                d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z">
            </path>
        </svg>
    </div>

<p class="my-4 mb-0 text-base font-normal leading-relaxed tracking-wide text-gray-400">
        I've been using XYZ
        for over a year now and their customer service is excellent! Whenever I have a question, the team is always
        available and willing to help. Highly recommend!
    </p>

<div class="mt-6 flex items-center gap-6 ">
        <div class="h-10 w-10 overflow-hidden rounded-full shadow-sm outline-neutral-800">
            <div class="relative inline-block overflow-hidden rounded-lg border-neutral-800">
                <img alt="" src="https://randomuser.me/api/portraits/women/2.jpg" width="50" height="50"
                    decoding="async" data-nimg="1" class="inline-block " loading="lazy" style="color: transparent;">
            </div>
        </div>
        <div>
            <p class="leading-relaxed tracking-wide text-gray-200">Melissa Smith</p>
            <p class="text-xs leading-relaxed tracking-wide text-gray-400">Marketing Manager</p>
        </div>
    </div>

</div>

Related Examples

Testimonial

Steven Kuhn

3 years ago

15.3k
Customer testimonies grid

Sameer Sultana

3 years ago

21.4k
User testimonial/review section

Sophia Baker

3 years ago

16.5k
User Review Card
With the like/dislike button, start raking and share button

Akshay

4 years ago

12.9k
Review Cards
Multiple rounded cards with user names, comments, and star ratings.

Hyun-woo Cho

3 years ago

9k
Customer testimonial card
Responsive user testimonial card with image

Arya

4 years ago

12.7k
Review cards with social proof icons

kishan pc

2 years ago

2.4k
Testimonial section
Gradient background and a testimonial quote with a highlighted phrase. The testimonial includes an image, name, and occupation.

Carla Hoffman

2 years ago

3.5k
Test99
test

Shakil Abdus Shohid

5 months ago

312
Premium Testimonial Carousel
It is a premium Testimonial Carousel

ishimwe shadad

1 year ago

2.3k
Testimonial Section
A responsive, SEO-friendly testimonial section for Ab Nahid Agency clients

Abdul Jabbar Al Nahid

1 year ago

1.3k
Testimonial Card with stars ratings

Quentin Rivers

2 years ago

2.4k