Home
Quentin Rivers
Testimonial Card with Gradient Background

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 CSS v3. It is responsive. It supports dark mode. similar terms for this example are endorsement,review

Testimonial

Author Quentin Rivers

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

Premium Testimonial Carousel
It is a premium Testimonial Carousel

Author:
ishimwe shadad

10 months ago

1.9k
basichtml
this is basic html

Author:
Anonymous

9 months ago

470
Profile, Team or Testimonial
Profile, Team or Testimonial

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

3.9k
Customer testimonies grid

Author:
Sameer Sultana

2 years ago

20.6k
Testimonial card with image

Author:
Simon Scheffer

3 years ago

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

Author:
Anum Shahana

1 year ago

1.8k
Enhanced Student Testimonials Section
A modern, interactive testimonials section featuring glassmorphism design, floating animations, and social proof elements. Includes star ratings, course badges, user profiles with online status indicators, and a stats section. Built with Tailwind CSS and features gradient backgrounds, hover effects, and responsive design optimized for showcasing student success stories and building credibility.

Author:
Muhammad Umair Arshad

7 months ago

799
Twitter testimonial card

Author:
Nishant Trivedi

2 years ago

8.6k
Simple testimonial card

Author:
Laurits

3 years ago

11.8k
Medlife Hospital
To provide exceptional, compassionate healthcare through innovative medicine, cutting-edge technology, and a commitment to patient-centered service

Author:
INGRIDE MUZIRANENGE

10 months ago

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

Author:
Komal Jain

2 years ago

11k
Tailwind CSS Testimonial Slider
Descriptive background image with Testimonial Slider .

Author:
Bernard Omuse

1 year ago

2.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components