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

Testimonial

Author Elsabe Fourie

Tailwind v3.4 9k 10

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

Steven Kuhn

3 years ago

15.2k
User testimonial/review section

Sophia Baker

3 years ago

16.5k
User testimonials

Conan Hilton

4 years ago

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

Komal Jain

2 years ago

11.6k
Testimonial full width

Piet Vriend

3 years ago

13.9k
Testimonial Card

Sophia Baker

3 years ago

11.5k
basichtml
this is basic html

Anonymous

1 year ago

925
Test99
test

Shakil Abdus Shohid

5 months ago

311
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.

Muhammad Umair Arshad

1 year ago

1.4k
How to create a carousel with Tailwind CSS and Alpinejs
How to create a carousel with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

4.3k
Testimonial

Leon Bachmann

3 years ago

10.4k
Skyhaven International
This is a responsive, modern airport website built with Tailwind CSS (a utility-first CSS framework) and Font Awesome for icons. It includes key sections that an airport website would typically have, such as flight information, services, parking, terminal maps, and contact details

INGRIDE MUZIRANENGE

1 year ago

1.1k