Testimonial section

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

This tailwind example is contributed by Carla Hoffman, on 25-Mar-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 Carla Hoffman

Tailwind v3.4 3.5k 9

Fork Fullscreen

<section class="relative py-20 overflow-hidden bg-gradient-to-br from-blue-900 via-blue-800 to-blue-500 shadow sm:py-24 md:py-24">
  <div class="relative max-w-6xl px-16 mx-auto xl:px-0">
    <svg class="absolute top-0 left-0 hidden w-32 h-32 -mt-3 -ml-16 text-yellow-300 opacity-50 xl:block" stroke="currentColor" fill="none" viewBox="0 0 144 144">
      <path stroke-width="2" d="M41.485 15C17.753 31.753 1 59.208 1 89.455c0 24.664 14.891 39.09 32.109 39.09 16.287 0 28.386-13.03 28.386-28.387 0-15.356-10.703-26.524-24.663-26.524-2.792 0-6.515.465-7.446.93 2.327-15.821 17.218-34.435 32.11-43.742L41.485 15zm80.04 0c-23.268 16.753-40.02 44.208-40.02 74.455 0 24.664 14.891 39.09 32.109 39.09 15.822 0 28.386-13.03 28.386-28.387 0-15.356-11.168-26.524-25.129-26.524-2.792 0-6.049.465-6.98.93 2.327-15.821 16.753-34.435 31.644-43.742L121.525 15z"></path>
    </svg>
    <div class="relative xl:pl-32 lg:flex lg:items-center">
      <div class="relative">
        <blockquote class="relative">
          <div class="text-xl font-semibold leading-9 tracking text-gray-100 md:text-3xl">
            <p class="">InfluenceMaster empowers me to craft social media posts<br><span class="font-extrabold text-transparent text-5xl bg-clip-text bg-gradient-to-r from-yellow-500 via-orange-200 to-red-600">reaching millions of followers</span>
            </p>

</div>
          <div class="mt-4">
            <div class="flex items-center">
              <div class="flex-shrink-0"><img class="object-cover w-24 h-24 border-blue-400 border-2 mr-4 rounded-full" src="https://randomuser.me/api/portraits/men/46.jpg" alt="John Doe testimonial">
              </div>
              <div class="ml-4 lg:ml-0">
                <div class="text-base font-medium leading-6 text-white">John Doe - Social Media Influencer</div>
                <div class="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-5 w-5 text-yellow-400">
                    <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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-5 w-5 text-yellow-400">
                    <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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-5 w-5 text-yellow-400">
                    <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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-5 w-5 text-yellow-400">
                    <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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-5 w-5 text-yellow-400">
                    <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>
                </div>
              </div>
            </div>
          </div>
        </blockquote>
      </div>
    </div>
  </div>
</section>

Related Examples

Testimonial Section with Gradient Background
The section includes a company logo at the top, a customer testimonial in the center, and the author's name and position at the bottom.

Elsabe Fourie

2 years ago

9k
Testimonial wall
added light mode support

yousef

2 years ago

3.8k
User Review Card
With the like/dislike button, start raking and share button

Akshay

3 years ago

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

Bernard Omuse

2 years ago

3.1k
Testimonials section

Bunny

3 years ago

10.7k
Responsive Testimonial Card with stars ratings

Quentin Rivers

1 year ago

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

rohit whyphy

1 year ago

1.6k
Profile, Team or Testimonial
Profile, Team or Testimonial

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

4.1k
Simple testimonial

Samuel Dawson

3 years ago

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

INGRIDE MUZIRANENGE

1 year ago

836
Testimonial Card

Sophia Baker

3 years ago

11.5k
basichtml
this is basic html

Anonymous

1 year ago

919