Home
Carla Hoffman
Testimonial section

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 CSS v3. It is responsive. It supports dark mode. similar terms for this example are endorsement,review

Testimonial

Author Carla Hoffman

2.4k

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

Simple Testimonial
Responsive and supports dark mode

Author:
Orson Kincaid

1 year ago

2.2k
Testimonial Card with Gradient Background

Author:
Quentin Rivers

1 year ago

1.8k
Testimonials

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

10 months ago

1.2k
Simple testimonial card

Author:
Laurits

2 years ago

11.4k
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.4k
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.

Author:
Elsabe Fourie

2 years ago

8.1k
Minimal Testimonial Card

Author:
Amit Pachange

2 years ago

8.9k
tailwind testimonial card

Author:
Ron Hicks

2 years ago

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

Author:
Bernard Omuse

1 year ago

2.5k
Testimonial Card with Floating Image and Star Rating
A beautifully designed testimonial card featuring a floating user image, review text, and a 5-star rating. The card uses a rounded layout with a bright yellow border, making it stand out on any page. Ideal for displaying customer feedback or product reviews with a modern look.

Author:
Anum Shahana

1 year ago

1.3k
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.

Author:
Muhammad Umair Arshad

3 months ago

455
Animated Testimonial Carousel
with highligted features

Author:
Paul Intay

11 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components