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

8.1k

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

14k
User testimonial/review section

Author:
Sophia Baker

2 years ago

14.9k
User testimonials

Author:
Conan Hilton

3 years ago

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

Author:
Komal Jain

1 year ago

10.4k
Testimonial full width

Author:
Piet Vriend

2 years ago

12.8k
Testimonial card

Author:
Mr Robot

3 years ago

10.9k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

171
Premium Testimonial Carousel
It is a premium Testimonial Carousel

Author:
ishimwe shadad

5 months ago

1.1k
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Author:
Coastal UI

8 months ago

916
Testimonials section

Author:
Bunny

2 years ago

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

2.3k
Modern page
hero page by salvator

Author:
Baraka Salvator

5 months ago

923

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components