User testimonials

This tailwind example is contributed by Conan Hilton, on 03-Jul-2022. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are endorsement,review

Testimonial

Author Conan Hilton

Tailwind v3.4 13.6k 24

Fork Fullscreen

<div class="py-5 dark:bg-gray-900">
    <div class="container flex flex-col items-center justify-center w-full p-6 mx-auto text-center xl:px-0">
        <div class="text-sm font-bold tracking-wider text-indigo-600 uppercase">Testimonials</div>
        <h2 class="max-w-2xl mt-3 text-3xl font-bold leading-snug tracking-tight text-gray-800 lg:leading-tight lg:text-4xl dark:text-white">Here's what our customers said</h2>
        <p class="max-w-2xl py-4 text-lg leading-normal text-gray-500 lg:text-xl xl:text-xl dark:text-gray-300">Testimonials is a great way to increase brand trust and awareness. Use this section to highlight your popular customers.</p>
    </div>
    <div class="container p-6 mx-auto mb-10 xl:px-0">
        <div class="grid gap-10 lg:grid-cols-2 xl:grid-cols-3">
            <div class="lg:col-span-2 xl:col-auto">
                <div class="flex flex-col justify-between w-full h-full px-6 py-6 bg-gray-100 dark:bg-gray-800 md:px-14 rounded-2xl md:py-14 dark:bg-trueGray-800">
                    <p class="text-2xl leading-normal dark:text-gray-300">Share a <mark class="mx-1 text-indigo-800 bg-indigo-100 rounded-md ring-indigo-100 ring-4 dark:ring-indigo-900 dark:bg-indigo-900 dark:text-indigo-200">testimonial</mark> that hits some of your benefits from one of your popular customers.</p>
                    <div class="flex items-center mt-8 space-x-3">
                        <div class="flex-shrink-0 overflow-hidden rounded-full w-14 h-14">
                            <img alt="Avatar" src="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?crop=faces&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwxfDB8MXxhbGx8fHx8fHx8fHwxNjIwMTQ5ODEx&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=100&amp;h=100" loading="lazy" />
                        </div>
                        <div>
                            <div class="text-lg font-medium text-gray-200">Sarah Steiner</div>
                            <div class="text-gray-600 dark:text-gray-400">VP Sales at Google</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="">
                <div class="flex flex-col justify-between w-full h-full px-6 py-6 bg-gray-100 dark:bg-gray-800 md:px-14 rounded-2xl md:py-14 dark:bg-trueGray-800">
                    <p class="text-2xl leading-normal dark:text-gray-300">Make sure you only pick the <mark class="mx-1 text-indigo-800 bg-indigo-100 rounded-md ring-indigo-100 ring-4 dark:ring-indigo-900 dark:bg-indigo-900 dark:text-indigo-200">right sentence</mark> to keep it short and simple.</p>
                    <div class="flex items-center mt-8 space-x-3">
                        <div class="flex-shrink-0 overflow-hidden rounded-full w-14 h-14">
                            <img alt="Avatar" src="https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;crop=faces&amp;fit=crop&amp;w=100&amp;h=100&amp;q=80" loading="lazy" />
                        </div>
                        <div>
                            <div class="text-lg font-medium text-gray-200">Dylan Ambrose</div>
                            <div class="text-gray-600 dark:text-gray-400">Lead marketer at Netflix </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="">
                <div class="flex flex-col justify-between w-full h-full px-6 py-6 bg-gray-100 dark:bg-gray-800 md:px-14 rounded-2xl md:py-14 dark:bg-trueGray-800">
                    <p class="text-2xl leading-normal dark:text-gray-300">This is an <mark class="mx-1 text-indigo-800 bg-indigo-100 rounded-md ring-indigo-100 ring-4 dark:ring-indigo-900 dark:bg-indigo-900 dark:text-indigo-200">awesome</mark> landing page template I've seen. I would use this for anything.</p>
                    <div class="flex items-center mt-8 space-x-3">
                        <div class="flex-shrink-0 overflow-hidden rounded-full w-14 h-14">
                            <img alt="Avatar" src="https://images.unsplash.com/photo-1624224971170-2f84fed5eb5e?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=100&amp;h=100&amp;crop=faces&amp;q=80" loading="lazy" />
                        </div>
                        <div>
                            <div class="text-lg font-medium text-gray-200">Gabrielle Winn</div>
                            <div class="text-gray-600 dark:text-gray-400">Co-founder of Acme Inc</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Related Examples

User review cards
Resposive testemonial cards

Erik Hyatt

3 years ago

15.8k
Customer testimonies grid

Sameer Sultana

3 years ago

21.3k
Testimonial

Steven Kuhn

3 years ago

15.2k
User testimonial/review section

Sophia Baker

3 years ago

16.5k
Testimonials

Lîmåã M

3 years ago

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

Komal Jain

2 years ago

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

Hyun-woo Cho

3 years ago

9k
Testimonial Section with Gradient Background
The section includes a company logo at the top, a customer testimonial in the center, and the author's name and position at the bottom.

Elsabe Fourie

2 years ago

9k
Testimonial Card

Anja Müller

3 years ago

7.3k
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
Testimonial Card

Sophia Baker

3 years ago

11.5k