Home
Brandon D
User product review card

User product review card

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

Testimonial

Author Brandon D

14.4k

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

Author:
Steven Kuhn

3 years ago

14.5k
Customer testimonies grid

Author:
Sameer Sultana

2 years ago

20.5k
User testimonial/review section

Author:
Sophia Baker

3 years ago

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

Author:
Akshay

3 years ago

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

Author:
Hyun-woo Cho

2 years ago

8.5k
Skyhaven International
This is a responsive, modern airport website built with Tailwind CSS (a utility-first CSS framework) and Font Awesome for icons. It includes key sections that an airport website would typically have, such as flight information, services, parking, terminal maps, and contact details

Author:
INGRIDE MUZIRANENGE

9 months ago

689
Tailwind Flex Component: Responsive Testimonial Section UI
A clean, modern, and fully responsive Testimonial Section built using Tailwind CSS and Flexbox. Ideal for portfolios, agency websites, SaaS landing pages, or any modern UI project. This reusable component includes user images, job titles, and quotes—perfect for showcasing feedback and adding trust to your UI.

Author:
Muhammad Umair Arshad

9 months ago

1.1k
masonary grids effect for cards using columns
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

Author:
rohit whyphy

1 year ago

1.3k
Premium Testimonial Carousel
It is a premium Testimonial Carousel

Author:
ishimwe shadad

9 months ago

1.9k
Simple Testimonial
Responsive and supports dark mode

Author:
Orson Kincaid

1 year ago

2.2k
Customer testimonial card
Responsive user testimonial card with image

Author:
Arya

3 years ago

12.1k
Testimonial - Htmlwind
Single centered testimonial

Author:
Htmlwind

9 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components