Home
Elsabe Fourie
Testimonial Section with Gradient Background

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.

This tailwind example is contributed by Elsabe Fourie, on 15-Oct-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are endorsement,review

Testimonial

Author Elsabe Fourie

7.8k

Fork Fullscreen

<section class="relative isolate overflow-hidden border-b border-t bg-white px-6 py-24 sm:py-32 lg:px-8">
  <div
    class="absolute inset-0 -z-10 bg-[radial-gradient(45rem_50rem_at_top,theme(colors.indigo.100),white)] opacity-20">
  </div>
  <div
    class="absolute inset-y-0 right-1/2 -z-10 mr-16 w-[200%] origin-bottom-left skew-x-[-30deg] bg-white shadow-xl shadow-indigo-600/10 ring-1 ring-indigo-50 sm:mr-28 lg:mr-0 xl:mr-16 xl:origin-center">
  </div>
  <div class="mx-auto max-w-2xl lg:max-w-4xl">
    <img class="mx-auto h-12 grayscale" src="https://www.svgrepo.com/show/443576/brand-xmpp.svg" alt="Zilla Digital Logo">
    <figure class="mt-10">
      <blockquote class="text-center text-xl font-semibold leading-8 text-gray-900 sm:text-2xl sm:leading-9">
        <p>“Your custom content goes here. Feel free to replace this text with your own message.”</p>
      </blockquote>
      <figcaption class="mt-10">
        <img class="mx-auto h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1605462863863-10d9e47e15ee?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw5fHxtYW58ZW58MHwwfHx8MTY5NzQ0MjkzOHww&ixlib=rb-4.0.3&q=80&w=1080" alt="">
        <div class="mt-4 flex items-center justify-center space-x-3 text-base">
          <div class="font-semibold text-gray-900">Your Name</div>
          <svg viewBox="0 0 2 2" width="3" height="3" aria-hidden="true" class="fill-gray-900">
            <circle cx="1" cy="1" r="1"></circle>
          </svg>
          <div class="text-gray-600">Your Position</div>
        </div>
      </figcaption>
    </figure>
  </div>
</section>

Related Examples

Testimonial

Author:
Steven Kuhn

2 years ago

13.8k
User testimonial/review section

Author:
Sophia Baker

2 years ago

14.8k
User testimonials

Author:
Conan Hilton

3 years ago

12.6k
Testimonial cards
each card contains a customer quote, an image of the customer, and their name.

Author:
Komal Jain

1 year ago

10.1k
Testimonial full width

Author:
Piet Vriend

2 years ago

12.7k
Testimonial wall
added light mode support

Author:
yousef

1 year ago

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

1 week ago

133
Landing page

Author:
Maxim

4 months ago

1.2k
User review cards
Resposive testemonial cards

Author:
Erik Hyatt

2 years ago

14.5k
Testimonials

Author:
Lîmåã M

2 years ago

11.6k
Customer testimonies grid

Author:
Sameer Sultana

2 years ago

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

Author:
Akshay

2 years ago

12.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components