Testimonial card

This tailwind example is contributed by Mr Robot, on 18-Sep-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 Mr Robot

Tailwind v3.4 11.9k 12

Fork Fullscreen

<div style="box-shadow:0px 2px 4px rgba(0, 0, 0, 0.06), 0px 4px 6px rgba(0, 0, 0, 0.1)"
    class="flex flex-col max-w-md align-center justify-between border border-solid border-gray-200 bg-white dark:bg-gray-800 rounded-xl">
    <div class="flex flex-col px-6 pt-8 mb-10 space-y-5">
        <svg width="24" height="18" viewBox="0 0 24 18" fill="none" xmlns="http://www.w3.org/2000/svg"
            class="text-gray-A400 dark:text-gray-600 fill-current">
            <path d="M24 7.3h-5.1L22.3.4H17l-3.4 6.9v10.3H24V7.3zM10.3 17.6V7.3H5L8.6.4H3.4L0 7.3v10.3h10.3z"
                fill="current"></path>
        </svg>
        <p class="body-medium m-0 dark:text-gray-200" style="hyphens:auto">These are high-quality courses.
            Trust me. I own around 10 and the price is worth it for the content quality. <a
                href="https://twitter.com/EducativeInc?ref_src=twsrc%5Etfw">@EducativeInc</a> came at the right time in
            my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made
            for developers. Thanks <a href="https://t.co/EeKruv5hxM">https://t.co/EeKruv5hxM</a></p>
    </div>
    <div class="flex space-x-2 bg-gray-50 dark:bg-gray-900/60 dark:text-gray-200 px-6 pt-6 pb-5 rounded-b-xl">
        <div class="flex flex-col justify-center">
            <p class="heading-six m-0">Anthony Walker</p>
            <p class="body-small m-0 mt-1">@_webarchitect_</p>
        </div>
    </div>
</div>

Related Examples

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

Komal Jain

2 years ago

11.6k
Customer testimonies grid

Sameer Sultana

3 years ago

21.4k
User review cards
Resposive testemonial cards

Erik Hyatt

3 years ago

15.9k
Tailwind testimonials section

Kofi Osei

3 years ago

13.6k
Twitter testimonial card

wtfbrh

2 years ago

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

Muhammad Umair Arshad

1 year ago

2k
User product review card

Brandon D

3 years ago

15k
Testimonial

Leon Bachmann

4 years ago

10.4k
Testimonials section

Bunny

3 years ago

10.7k
Testimonial

Steven Kuhn

3 years ago

15.3k
Testimonials

Lîmåã M

3 years ago

12.5k