User review cards

Resposive testemonial cards

This tailwind example is contributed by Erik Hyatt, on 04-Jun-2023. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are endorsement,review

Testimonial

Author Erik Hyatt

Tailwind v3.4 15.8k 19

Fork Fullscreen

<div
                class="aspect-auto p-8 border border-gray-100 rounded-3xl bg-white dark:bg-gray-800 dark:border-gray-700 shadow-2xl shadow-gray-600/10 dark:shadow-none">
                <div class="flex gap-4">
                    <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/12.jpg" alt="user avatar" width="400" height="400" loading="lazy">
                    <div>
                        <h6 class="text-lg font-medium text-gray-700 dark:text-white">Daniella Doe</h6>
                        <p class="text-sm text-gray-500 dark:text-gray-300">Mobile dev</p>
                    </div>
                </div>
                <p class="mt-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum aliquid quo eum quae quos
                    illo earum ipsa doloribus nostrum minus libero aspernatur laborum cum, a suscipit, ratione ea totam
                    ullam! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto laboriosam deleniti
                    aperiam ab veniam sint non cumque quis tempore cupiditate. Sint libero voluptas veniam at
                    reprehenderit, veritatis harum et rerum.
                </p>
            </div>

<div
                class="aspect-auto p-8 border border-gray-100 rounded-3xl bg-white dark:bg-gray-800 dark:border-gray-700 shadow-2xl shadow-gray-600/10 dark:shadow-none">
                <div class="flex gap-4">
                    <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>
                        <h6 class="text-lg font-medium text-gray-700 dark:text-white">Jane doe</h6>
                        <p class="text-sm text-gray-500 dark:text-gray-300">Marketing</p>
                    </div>
                </div>
                <p class="mt-8"> Lorem ipsum dolor laboriosam deleniti aperiam ab veniam sint non cumque quis tempore
                    cupiditate. Sint libero voluptas veniam at reprehenderit, veritatis harum et rerum.
                </p>
            </div>

<div
                class="aspect-auto p-8 border border-gray-100 rounded-3xl bg-white dark:bg-gray-800 dark:border-gray-700 shadow-2xl shadow-gray-600/10 dark:shadow-none">
                <div class="flex gap-4">
                    <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/18.jpg" alt="user avatar" width="200" height="200" loading="lazy">
                    <div>
                        <h6 class="text-lg font-medium text-gray-700 dark:text-white">Yanick Doe</h6>
                        <p class="text-sm text-gray-500 dark:text-gray-300">Developer</p>
                    </div>
                </div>
                <p class="mt-8">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto laboriosam deleniti
                    aperiam ab veniam sint non cumque quis tempore cupiditate. Sint libero voluptas veniam at
                    reprehenderit, veritatis harum et rerum.
                </p>
            </div>

<div
                class="aspect-auto p-8 border border-gray-100 rounded-3xl bg-white dark:bg-gray-800 dark:border-gray-700 shadow-2xl shadow-gray-600/10 dark:shadow-none">
                <div class="flex gap-4">
                    <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>
                        <h6 class="text-lg font-medium text-gray-700 dark:text-white">Jane Doe</h6>
                        <p class="text-sm text-gray-500 dark:text-gray-300">Mobile dev</p>
                    </div>
                </div>
                <p class="mt-8">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto laboriosam deleniti
                    aperiam ab veniam sint non cumque quis tempore cupiditate. Sint libero voluptas veniam at
                    reprehenderit, veritatis harum et rerum.
                </p>
            </div>

<div
                class="aspect-auto p-8 border border-gray-100 rounded-3xl bg-white dark:bg-gray-800 dark:border-gray-700 shadow-2xl shadow-gray-600/10 dark:shadow-none">
                <div class="flex gap-4">
                    <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/62.jpg" alt="user avatar" width="200" height="200" loading="lazy">
                    <div>
                        <h6 class="text-lg font-medium text-gray-700 dark:text-white">Andy Doe</h6>
                        <p class="text-sm text-gray-500 dark:text-gray-300">Manager</p>
                    </div>
                </div>
                <p class="mt-8"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto laboriosam
                    deleniti aperiam ab veniam sint non cumque quis tempore cupiditate. Sint libero voluptas veniam at
                    reprehenderit, veritatis harum et rerum.
                </p>
            </div>

<div
                class="aspect-auto p-8 border border-gray-100 rounded-3xl bg-white dark:bg-gray-800 dark:border-gray-700 shadow-2xl shadow-gray-600/10 dark:shadow-none">
                <div class="flex gap-4">
                    <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>
                        <h6 class="text-lg font-medium text-gray-700 dark:text-white">Yanndy Doe</h6>
                        <p class="text-sm text-gray-500 dark:text-gray-300">Mobile dev</p>
                    </div>
                </div>
                <p class="mt-8">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto laboriosam deleniti
                    aperiam ab veniam sint non cumque quis tempore cupiditate. Sint libero voluptas veniam at
                    reprehenderit, veritatis harum et rerum.
                </p>
            </div>

</div>
    </div>
</div>

Related Examples

Customer testimonies grid

Sameer Sultana

3 years ago

21.3k
Testimonial

Steven Kuhn

3 years ago

15.2k
User testimonials

Conan Hilton

4 years ago

13.6k
Testimonial cards
each card contains a customer quote, an image of the customer, and their name.

Komal Jain

2 years ago

11.5k
User testimonial/review section

Sophia Baker

3 years ago

16.5k
Customer testimonial card
Responsive user testimonial card with image

Arya

3 years ago

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

Akshay

3 years ago

12.9k
Testimonials
Testimonial Card for landing pages.

Prashant

4 years ago

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

Hyun-woo Cho

3 years ago

9k
Simple testimonial card

Laurits

3 years ago

12.1k
Testimonial card

Mr Robot

4 years ago

11.8k
Testimonial slide gradient

Freja Jensen

3 years ago

11.1k
Simple testimonial

Samuel Dawson

3 years ago

12.3k