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

6.9k

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.1k
User testimonial/review section

Author:
Sophia Baker

2 years ago

13.5k
User testimonials

Author:
Conan Hilton

2 years ago

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

Author:
Komal Jain

1 year ago

8.9k
Testimonial full width

Author:
Piet Vriend

1 year ago

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

Author:
Carla Hoffman

9 months ago

1.3k
Testimonial Card with stars ratings

Author:
Quentin Rivers

3 months ago

737
Testimonial

Author:
Leon Bachmann

2 years ago

8.7k
beautifull web page
I create a web page using cloude ai its amazing.

Author:
Akram Khan

6 months ago

1.5k
Simple testimonial

Author:
Samuel Dawson

2 years ago

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

4 months ago

936
Simple testimonial card

Author:
Laurits

2 years ago

9.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components