Testimonial Card with stars ratings

This tailwind example is contributed by Quentin Rivers, on 05-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 7

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

Simple testimonial

Samuel Dawson

3 years ago

12.4k
Review Cards
Multiple rounded cards with user names, comments, and star ratings.

Hyun-woo Cho

3 years ago

9k
Testimonial card with image

Simon Scheffer

3 years ago

12.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.

Muhammad Umair Arshad

1 year ago

1.5k
Minimal Testimonial Card

Amit Pachange

3 years ago

9.5k
beautifull web page
I create a web page using cloude ai its amazing.

Akram Khan

2 years ago

3.6k
How to create a carousel with Tailwind CSS and Alpinejs
How to create a carousel with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

4.3k
Customer testimonies grid

Sameer Sultana

3 years ago

21.4k
Simple Testimonial
Responsive and supports dark mode

Orson Kincaid

2 years ago

3k
Testimonials

Lîmåã M

3 years ago

12.5k
tailwind testimonial card

Ron Hicks

3 years ago

10.6k
Premium Testimonial Carousel
It is a premium Testimonial Carousel

ishimwe shadad

1 year ago

2.3k