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

Testimonial slide gradient

Freja Jensen

3 years ago

11.1k
Premium Testimonial Carousel
It is a premium Testimonial Carousel

ishimwe shadad

1 year ago

2.3k
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
Testimonial

Steven Kuhn

3 years ago

15.2k
Testimonial card with image

Simon Scheffer

3 years ago

12.8k
Testimonial for dark theme

Sophia Baker

3 years ago

10.9k
Twitter testimonial card

wtfbrh

2 years ago

2.1k
Testimonial Card with Floating Image and Star Rating
A beautifully designed testimonial card featuring a floating user image, review text, and a 5-star rating. The card uses a rounded layout with a bright yellow border, making it stand out on any page. Ideal for displaying customer feedback or product reviews with a modern look.

Anum Shahana

2 years ago

2k
Customer testimonial card
Responsive user testimonial card with image

Arya

3 years ago

12.7k
Medlife Hospital
To provide exceptional, compassionate healthcare through innovative medicine, cutting-edge technology, and a commitment to patient-centered service

INGRIDE MUZIRANENGE

1 year ago

837
Testimonials

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

1.9k
Landing page

Maxim

1 year ago

2.8k