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.1k

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

2 years ago

13.9k
Customer testimonies grid

Author:
Sameer Sultana

2 years ago

19.8k
User testimonial/review section

Author:
Sophia Baker

2 years ago

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

Author:
Akshay

2 years ago

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

Author:
Hyun-woo Cho

2 years ago

7.9k
Designing a Responsive Activity Feed with Tailwind CSS
Enhance your web application by building a sleek and responsive activity feed using Tailwind CSS. This comprehensive guide walks you through creating an interactive feed section featuring customizable icons, links, and timestamps. Learn how to implement a visually appealing and accessible timeline that adapts seamlessly to any device, improving user engagement and overall experience

Author:
zobaidul kaziex

1 year ago

2.2k
Testimonial full width

Author:
Piet Vriend

2 years ago

12.8k
Simple testimonial card

Author:
Laurits

2 years ago

11k
User review cards
Resposive testemonial cards

Author:
Erik Hyatt

2 years ago

14.9k
Responsive Testimonial Card with stars ratings

Author:
Quentin Rivers

1 year ago

1.6k
Testimonial card

Author:
Amit Pachange

2 years ago

11.4k
Testimonial for dark theme

Author:
Sophia Baker

2 years ago

10k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components