Home
Conan Hilton
User testimonials

User testimonials

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

Testimonial

Author Conan Hilton

13k

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

Author:
Erik Hyatt

2 years ago

15.2k
Customer testimonies grid

Author:
Sameer Sultana

2 years ago

20.4k
Testimonial

Author:
Steven Kuhn

3 years ago

14.5k
User testimonial/review section

Author:
Sophia Baker

3 years ago

15.3k
Testimonials

Author:
Lîmåã M

2 years ago

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

Author:
Komal Jain

2 years ago

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

Author:
Hyun-woo Cho

2 years ago

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

Author:
Elsabe Fourie

2 years ago

8.7k
Testimonial Card

Author:
Anja Müller

2 years ago

6.8k
Customer testimonial card
Responsive user testimonial card with image

Author:
Arya

3 years ago

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

Author:
Akshay

3 years ago

12.6k
Tailwind Flex Component: Responsive Testimonial Section UI
A clean, modern, and fully responsive Testimonial Section built using Tailwind CSS and Flexbox. Ideal for portfolios, agency websites, SaaS landing pages, or any modern UI project. This reusable component includes user images, job titles, and quotes—perfect for showcasing feedback and adding trust to your UI.

Author:
Muhammad Umair Arshad

9 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components