Home
Quentin Rivers
Testimonial Card with stars ratings

Testimonial Card with stars ratings

This tailwind example is contributed by Quentin Rivers, on 05-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 w-full bg-gradient-to-br from-purple-600 to-blue-500 rounded-2xl shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-300">
  <div class="p-6 sm:p-8">
    <div class="flex justify-between items-center mb-4">
      <div class="flex items-center space-x-2">
        <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
          viewBox="0 0 20 20">
          <path d="M10 15.27L16.18 20l-1.64-7.03L20 8.24l-7.19-.61L10 1 7.19 7.63 0 8.24l5.46 4.73L3.82 20z" />
        </svg>
        <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
          viewBox="0 0 20 20">
          <path d="M10 15.27L16.18 20l-1.64-7.03L20 8.24l-7.19-.61L10 1 7.19 7.63 0 8.24l5.46 4.73L3.82 20z" />
        </svg>
        <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
          viewBox="0 0 20 20">
          <path d="M10 15.27L16.18 20l-1.64-7.03L20 8.24l-7.19-.61L10 1 7.19 7.63 0 8.24l5.46 4.73L3.82 20z" />
        </svg>
        <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
          viewBox="0 0 20 20">
          <path d="M10 15.27L16.18 20l-1.64-7.03L20 8.24l-7.19-.61L10 1 7.19 7.63 0 8.24l5.46 4.73L3.82 20z" />
        </svg>
        <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
          viewBox="0 0 20 20">
          <path d="M10 15.27L16.18 20l-1.64-7.03L20 8.24l-7.19-.61L10 1 7.19 7.63 0 8.24l5.46 4.73L3.82 20z" />
        </svg>
      </div>
      <span class="text-white text-sm font-semibold">Verified Customer</span>
    </div>
    <blockquote class="text-white text-xl font-medium mb-6">
      "This product exceeded all my expectations. It's intuitive, powerful, and has dramatically improved my
      workflow. I can't imagine working without it now!"
    </blockquote>
    <div class="flex items-center space-x-4">
      <img src="https://randomuser.me/api/portraits/women/91.jpg" alt="User avatar" class="w-12 h-12 rounded-full border-2 border-white" />
      <div>
        <p class="text-white font-semibold">Sarah Johnson</p>
        <p class="text-blue-200 text-sm">UX Designer</p>
      </div>
    </div>
  </div>
</div>

Related Examples

Testimonial - Htmlwind
Single centered testimonial

Author:
Htmlwind

2 months ago

244
Testimonial for dark theme

Author:
Sophia Baker

2 years ago

9.9k
Simple testimonial card

Author:
Laurits

2 years ago

10.8k
Testimonials

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

7 months ago

1k
Animated Testimonial Carousel
with highligted features

Author:
Paul Intay

7 months ago

911
Responsive Testimonial Card with stars ratings

Author:
Quentin Rivers

9 months ago

1.3k
Testimonials

Author:
Lîmåã M

2 years ago

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

Author:
Carla Hoffman

1 year ago

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

Author:
INGRIDE MUZIRANENGE

2 months ago

196
tailwind testimonial card

Author:
Ron Hicks

2 years ago

9.7k
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).

Author:
rohit whyphy

5 months ago

770
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

Author:
INGRIDE MUZIRANENGE

2 months ago

265

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components