Review cards with social proof icons

Forked from @erik-hyatt/user-review-cards

This tailwind example is contributed by kishan pc, on 22-Jul-2024. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are endorsement,review

Testimonial

Author kishan pc

Tailwind v3.4 2.4k 5

Fork Fullscreen

<section class="pb-12 mx-auto md:pb-20 max-w-7xl">
    <div class="py-4 text-center md:py-8">
        <h4 class="text-base font-bold tracking-wide text-center uppercase text-teal-600">Reviews</h4>
        <p class="mt-2 tracking-tight text-gray-900 text:xl md:text-2xl">We have some fans.</p>
    </div>

<div class="p-8 bg-white border border-gray-100 shadow-2xl aspect-auto rounded-3xl shadow-gray-600/10">
            <div class="flex gap-4 items-start">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/12.jpg" alt="user avatar" width="400" height="400" loading="lazy">
                <div class="flex-1 flex justify-between items-start">
                    <div>
                        <h6 class="text-lg font-medium text-gray-700">Ravi Kumar</h6>
                        <p class="text-sm text-gray-500">Car Enthusiast</p>
                    </div>
                    <a href="https://twitter.com/ravikumar/status/1234567890"
                        class="text-blue-500 hover:text-blue-600 ml-4">
                        <i class="fab fa-twitter"></i>
                    </a>
                </div>
            </div>
            <p class="mt-8">The quality of these seat covers is outstanding. They fit perfectly and add a touch of
                luxury to
                my car's interior. Highly recommend!</p>
        </div>

<div class="p-8 bg-white border border-gray-100 shadow-2xl aspect-auto rounded-3xl shadow-gray-600/10">
            <div class="flex gap-4 items-start">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/14.jpg" alt="user avatar" width="200" height="200" loading="lazy">
                <div class="flex-1 flex justify-between items-start">
                    <div>
                        <h6 class="text-lg font-medium text-gray-700">Anjali Sharma</h6>
                        <p class="text-sm text-gray-500">Marketing Professional</p>
                    </div>
                    <a href="https://www.instagram.com/p/1234567890" class="text-blue-500 hover:text-blue-600 ml-4">
                        <i class="fab fa-instagram"></i>
                    </a>
                </div>
            </div>
            <p class="mt-8">I love the customizable designs! I was able to choose the perfect color to match my car's
                interior. The material feels very durable.</p>
        </div>

<div class="p-8 bg-white border border-gray-100 shadow-2xl aspect-auto rounded-3xl shadow-gray-600/10">
            <div class="flex gap-4 items-start">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/18.jpg" alt="user avatar" width="200" height="200" loading="lazy">
                <div class="flex-1 flex justify-between items-start">
                    <div>
                        <h6 class="text-lg font-medium text-gray-700">Vijay Singh</h6>
                        <p class="text-sm text-gray-500">Software Developer</p>
                    </div>
                    <a href="https://www.facebook.com/vijaysingh/posts/1234567890"
                        class="text-blue-500 hover:text-blue-600 ml-4">
                        <i class="fab fa-facebook"></i>
                    </a>
                </div>
            </div>
            <p class="mt-8">These seat covers are a game-changer for long drives. The added padding and ergonomic design
                make
                a huge difference in comfort.</p>
        </div>

<div class="p-8 bg-white border border-gray-100 shadow-2xl aspect-auto rounded-3xl shadow-gray-600/10">
            <div class="flex gap-4 items-start">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="user avatar" width="200" height="200" loading="lazy">
                <div class="flex-1 flex justify-between items-start">
                    <div>
                        <h6 class="text-lg font-medium text-gray-700">Priya Patel</h6>
                        <p class="text-sm text-gray-500">Mobile Developer</p>
                    </div>
                    <a href="https://twitter.com/priyapatel/status/1234567890"
                        class="text-blue-500 hover:text-blue-600 ml-4">
                        <i class="fab fa-twitter"></i>
                    </a>
                </div>
            </div>
            <p class="mt-8">The installation was super easy, and the instructions were clear. My car looks and feels
                much more
                upscale now.</p>
        </div>

<div class="p-8 bg-white border border-gray-100 shadow-2xl aspect-auto rounded-3xl shadow-gray-600/10">
            <div class="flex gap-4 items-start">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/62.jpg" alt="user avatar" width="200" height="200" loading="lazy">
                <div class="flex-1 flex justify-between items-start">
                    <div>
                        <h6 class="text-lg font-medium text-gray-700">Arjun Mehta</h6>
                        <p class="text-sm text-gray-500">Manager</p>
                    </div>
                    <a href="https://www.instagram.com/p/1234567890" class="text-blue-500 hover:text-blue-600 ml-4">
                        <i class="fab fa-instagram"></i>
                    </a>
                </div>
            </div>
            <p class="mt-8">Great value for money. The seat covers have a premium feel and have significantly improved
                the
                look of my car's interior.</p>
        </div>

<div class="p-8 bg-white border border-gray-100 shadow-2xl aspect-auto rounded-3xl shadow-gray-600/10">
            <div class="flex gap-4 items-start">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/19.jpg" alt="user avatar" width="400" height="400" loading="lazy">
                <div class="flex-1 flex justify-between items-start">
                    <div>
                        <h6 class="text-lg font-medium text-gray-700">Sneha Rao</h6>
                        <p class="text-sm text-gray-500">Product Designer</p>
                    </div>
                    <a href="https://www.facebook.com/sneharao/posts/1234567890"
                        class="text-blue-500 hover:text-blue-600 ml-4">
                        <i class="fab fa-facebook"></i>
                    </a>
                </div>
            </div>
            <p class="mt-8">Absolutely love these seat covers. They're stylish, comfortable, and were really easy to
                install.
                My car interior looks brand new!</p>
        </div>

</div>
</section>

Related Examples

Customer testimonial card
Responsive user testimonial card with image

Arya

3 years ago

12.7k
Twitter testimonial card

wtfbrh

2 years ago

2.1k
How to create a carousel with Tailwind CSS and Alpinejs
How to create a carousel with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

4.3k
Fashion Landing Page with Hero Slider, GSAP Animations
fashion/eCommerce landing page built using HTML, CSS, GSAP, Swiper.js, and Lenis Smooth Scroll.

JUGENDRA GANGWAR

3 months ago

281
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

INGRIDE MUZIRANENGE

1 year ago

1.1k
Testimonials section

Bunny

3 years ago

10.7k
Test99
test

Shakil Abdus Shohid

4 months ago

257
Testimonial Card

Anonymous

1 year ago

1.4k
basichtml
this is basic html

Anonymous

1 year ago

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

Akshay

3 years ago

12.9k
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).

rohit whyphy

1 year ago

1.6k
Tailwind CSS Testimonial Slider
Descriptive background image with Testimonial Slider .

Bernard Omuse

2 years ago

3.1k