Testimonials section

This tailwind example is contributed by Bunny, on 24-Jan-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are endorsement,review

Testimonial

Author Bunny

Tailwind v3.4 10.7k 10

Fork Fullscreen

<div class="p-4 m-4 bg-gray-100 rounded rounded-lg overflow-hidden md:pt-14 lg:pt-24">
    <div class="relative max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="relative">
            <blockquote class="mt-4">
                <div class="max-w-3xl mx-auto text-center text-2xl leading-9 font-medium text-gray-900 text-raleway">
                    <p>
                        “Pest is minimal, distraction-free, and a joy to use.”
                    </p>
                </div>
                <footer class="mt-8">
                    <div class="md:flex md:items-center md:justify-center">
                        <div class="md:flex-shrink-0">
                            <img alt="Taylor" loading="lazy" class="mx-auto h-10 w-10 rounded-full" src="https://pbs.twimg.com/profile_images/1609760305763975170/Tx2TVkPI_400x400.jpg">
                        </div>
                        <div class="mt-3 text-center md:mt-0 md:ml-4 md:flex md:items-center">
                            <div class="text-base leading-6 font-medium text-gray-900">
                                Taylor Otwell
                            </div>
                            <svg class="hidden md:block mx-1 h-5 w-5 text-purple-600" fill="currentColor"
                                style="color: #ff89ff" viewBox="0 0 20 20">
                                <path d="M11 0h3L9 20H6l5-20z">
                                </path>
                            </svg>
                            <div class="text-base leading-6 font-medium text-gray-500">
                                Creator of Laravel
                            </div>
                        </div>
                    </div>
                </footer>
            </blockquote>
        </div>
    </div>
</div>

Related Examples

Testimonial

Steven Kuhn

3 years ago

15.2k
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
Testimonials

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

1 year ago

2.3k
Testimonial Card

Sophia Baker

3 years ago

11.5k
Twitter testimonial card

wtfbrh

2 years ago

2.1k
Testimonial wall

yousef

2 years ago

4.1k
User product review card

Brandon D

3 years ago

14.9k
Testimonial Card with Floating Image and Star Rating
A beautifully designed testimonial card featuring a floating user image, review text, and a 5-star rating. The card uses a rounded layout with a bright yellow border, making it stand out on any page. Ideal for displaying customer feedback or product reviews with a modern look.

Anum Shahana

1 year ago

1.9k
Testimonial section
Gradient background and a testimonial quote with a highlighted phrase. The testimonial includes an image, name, and occupation.

Carla Hoffman

2 years ago

3.5k
Customer testimonial card
Responsive user testimonial card with image

Arya

3 years ago

12.7k
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.2k
Testimonials

Lîmåã M

3 years ago

12.4k