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

1.4k

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

User testimonial/review section

Author:
Sophia Baker

2 years ago

14.8k
Testimonial Card

Author:
Anonymous

9 months ago

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

Author:
Hyun-woo Cho

2 years ago

7.9k
Testimonial Card

Author:
Sophia Baker

2 years ago

10.6k
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

7 months ago

1.1k
Testimonial wall
added light mode support

Author:
yousef

1 year ago

3.1k
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

Author:
zobaidul kaziex

1 year ago

2.2k
Twitter Testimonials Showcase with Tailwind CSS

Author:
EliteAI Tools

7 months ago

862
Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Author:
Ijila Itunu

3 weeks ago

135
Twitter testimonial card

Author:
wtfbrh

1 year ago

1.5k
Premium Testimonial Carousel
It is a premium Testimonial Carousel

Author:
ishimwe shadad

4 months ago

938
Testimonial Card

Author:
Anja Müller

2 years ago

6.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components