Home
Anonymous
Testimonial Card

Testimonial Card

This tailwind example is contributed by Anonymous, on 14-Dec-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 Anonymous

687

Fork Fullscreen

<div
  class="bg-white max-w-md dark:bg-gray-800 p-8 rounded-lg shadow-md dark:shadow-gray-700 transition-all duration-300 hover:shadow-lg dark:hover:shadow-gray-600 transform hover:scale-105">
  <div class="flex items-center mb-4">
    <img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://via.placeholder.com/150" alt="Reviewer's Name">
    <div>
      <h4 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Reviewer's Name</h4>
      <p class="text-gray-600 dark:text-gray-400">Reviewer's Title</p>
    </div>
  </div>
  <p class="text-gray-700 dark:text-gray-300 text-base leading-relaxed">
    "This is a glowing testimonial! I absolutely loved the product/service. It exceeded my expectations in every way. I
    highly recommend it to anyone looking for a top-notch experience."
  </p>
  <div class="mt-6">
    <div class="flex items-center">
      <svg aria-hidden="true" class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"
        xmlns="http://www.w3.org/2000/svg">
        <title>First star</title>
        <path
          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
        </path>
      </svg>
      <svg aria-hidden="true" class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"
        xmlns="http://www.w3.org/2000/svg">
        <title>Second star</title>
        <path
          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
        </path>
      </svg>
      <svg aria-hidden="true" class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"
        xmlns="http://www.w3.org/2000/svg">
        <title>Third star</title>
        <path
          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
        </path>
      </svg>
      <svg aria-hidden="true" class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"
        xmlns="http://www.w3.org/2000/svg">
        <title>Fourth star</title>
        <path
          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
        </path>
      </svg>
      <svg aria-hidden="true" class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"
        xmlns="http://www.w3.org/2000/svg">
        <title>Fifth star</title>
        <path
          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
        </path>
      </svg>
      <span class="text-gray-600 dark:text-gray-400 ml-2">5.0</span>
    </div>
  </div>
</div>

Related Examples

Testimonials

Author:
Lîmåã M

1 year ago

11.4k
Minimal Testimonial Card

Author:
Amit Pachange

2 years ago

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

Author:
Bernard Omuse

9 months ago

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

Author:
Hyun-woo Cho

1 year ago

7.3k
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.8k
Landing page

Author:
Maxim

2 months ago

556
Testimonials

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

4 months ago

821
Testimonials section

Author:
Bunny

2 years ago

9.3k
Simple Testimonial
Responsive and supports dark mode

Author:
Orson Kincaid

7 months ago

1.2k
Testimonial for dark theme

Author:
Sophia Baker

2 years ago

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

8 months ago

1.5k
Testimonial Card

Author:
Anja Müller

1 year ago

6.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components