Testimonial Card with Gradient Background

Forked from @quentin/testimonial-card-6

This tailwind example is contributed by Quentin Rivers, on 08-Oct-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are endorsement,review

Testimonial

Author Quentin Rivers

Tailwind v3.4 2.4k 9

Fork Fullscreen

<div class="max-w-md mx-auto">
  <div
    class="relative overflow-hidden bg-gradient-to-r from-purple-600 to-indigo-600 rounded-xl shadow-2xl p-8 text-white">
    <div class="absolute top-0 left-0 w-full h-full bg-white opacity-10 transform -skew-x-12"></div>
    <div class="relative z-10">
      <svg class="w-12 h-12 mb-4 text-purple-300" fill="currentColor" viewBox="0 0 24 24">
        <path
          d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" />
      </svg>
      <p class="text-xl font-medium mb-4">
        "This product exceeded all my expectations. It's intuitive, powerful, and has dramatically improved my workflow.
        I can't imagine working without it now!"</p>
      <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/women/91.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4 border-2 border-purple-300">
        <div>
          <h4 class="font-semibold">Sarah Johnson</h4>
          <p class="text-purple-200">UX Designer</p>
        </div>
      </div>
    </div>
  </div>
</div>

Related Examples

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
basichtml
this is basic html

Anonymous

1 year ago

925
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

1.9k
Simple Testimonial
Responsive and supports dark mode

Orson Kincaid

2 years ago

3k
Customer testimonial card
Responsive user testimonial card with image

Arya

3 years ago

12.7k
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Coastal UI

1 year ago

1.5k
Testimonial full width

Piet Vriend

3 years ago

13.9k
Responsive Testimonial Card with stars ratings

Quentin Rivers

2 years ago

2.8k
tailwind testimonial card

Ron Hicks

3 years ago

10.6k
Testimonial

Steven Kuhn

3 years ago

15.2k
Fashion Landing Page with Hero Slider, GSAP Animations
fashion/eCommerce landing page built using HTML, CSS, GSAP, Swiper.js, and Lenis Smooth Scroll.

JUGENDRA GANGWAR

3 months ago

396
Testimonial wall
added light mode support

yousef

2 years ago

3.9k