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.8k 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.5k
Customer testimonies grid

Sameer Sultana

3 years ago

21.3k
User review cards
Resposive testemonial cards

Erik Hyatt

3 years ago

15.8k
Tailwind testimonials section

Kofi Osei

3 years ago

13.6k
Skyhaven International
This is a responsive, modern airport website built with Tailwind CSS (a utility-first CSS framework) and Font Awesome for icons. It includes key sections that an airport website would typically have, such as flight information, services, parking, terminal maps, and contact details

INGRIDE MUZIRANENGE

1 year ago

1.1k
Testimonial Card

Sophia Baker

3 years ago

11.5k
Simple testimonial

Samuel Dawson

3 years ago

12.3k
Designing a Responsive Activity Feed with Tailwind CSS
Enhance your web application by building a sleek and responsive activity feed using Tailwind CSS. This comprehensive guide walks you through creating an interactive feed section featuring customizable icons, links, and timestamps. Learn how to implement a visually appealing and accessible timeline that adapts seamlessly to any device, improving user engagement and overall experience

zobaidul kaziex

2 years ago

3.1k
basichtml
this is basic html

Anonymous

1 year ago

919
Testimonial Card

Anja Müller

2 years ago

7.3k
Testimonial Section
A responsive, SEO-friendly testimonial section for Ab Nahid Agency clients

Abdul Jabbar Al Nahid

1 year ago

1.2k
Testimonials

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

1 year ago

1.9k