Home
Htmlwind
Testimonial - Htmlwind

Testimonial - Htmlwind

Single centered testimonial

This tailwind example is contributed by Htmlwind, on 02-Jun-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are endorsement,review

Testimonial

Author Htmlwind

463

Fork Fullscreen

<section class="relative overflow-hidden bg-gray-50 py-24 sm:py-32">
  <div class="absolute -left-[30rem] -top-[25rem] aspect-square h-[50rem] rounded-full shadow-2xl shadow-gray-500/10"></div>
  <div class="absolute -bottom-[20rem] -right-[32rem] aspect-square h-[50rem] rounded-full shadow-2xl shadow-gray-500/20">
    <div class="absolute left-1/2 top-1/2 aspect-square h-[30rem] -translate-x-1/2 -translate-y-1/2 rounded-full shadow-2xl shadow-gray-500/30"></div>
  </div>
  <div class="relative mx-auto max-w-2xl px-6 lg:max-w-4xl lg:px-8">
    <svg class="mx-auto h-10 w-10 text-gray-900/10" viewBox="0 0 38 31" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M9.56016 14C11.8268 14.2 13.6602 15.0333 15.0602 16.5C16.4602 17.9667 17.1602 19.8333 17.1602 22.1C17.1602 24.5667 16.3602 26.6333 14.7602 28.3C13.2268 29.9 11.2935 30.7 8.96016 30.7C6.29349 30.7 4.16016 29.7667 2.56016 27.9C0.960157 25.9667 0.160156 23.2 0.160156 19.6C0.160156 12.6 2.62682 6.53333 7.56016 1.4C8.49349 0.466663 9.56016 -3.8147e-06 10.7602 -3.8147e-06C11.8935 -3.8147e-06 12.8935 0.399997 13.7602 1.2C14.6268 1.93333 15.0602 2.83333 15.0602 3.9C15.0602 4.83333 14.6935 5.7 13.9602 6.5C11.7602 8.83333 10.2935 11.3333 9.56016 14ZM30.2602 14C32.5268 14.2 34.3602 15.0333 35.7602 16.5C37.1602 17.9667 37.8602 19.8333 37.8602 22.1C37.8602 24.5667 37.0602 26.6333 35.4602 28.3C33.9268 29.9 31.9935 30.7 29.6602 30.7C26.9935 30.7 24.8602 29.7667 23.2602 27.9C21.6602 25.9667 20.8602 23.2 20.8602 19.6C20.8602 12.6 23.3268 6.53333 28.2602 1.4C29.1935 0.466663 30.2602 -3.8147e-06 31.4602 -3.8147e-06C32.5935 -3.8147e-06 33.5935 0.399997 34.4602 1.2C35.3268 1.93333 35.7602 2.83333 35.7602 3.9C35.7602 4.83333 35.3935 5.7 34.6602 6.5C32.4602 8.83333 30.9935 11.3333 30.2602 14Z" fill="currentColor" />
    </svg>
    <figure class="mt-4">
      <blockquote class="text-center text-xl font-semibold leading-8 text-gray-900 sm:text-2xl sm:leading-9">
        <p>Working with Gotham Innovations has been a fantastic experience. Their innovative spirit and dedication to excellence align perfectly with our mission at DarkLabs. Collaborating with James and his team has led to some truly exciting breakthroughs. It’s partnerships like these that fuel my passion for what I do.</p>
      </blockquote>
      <figcaption class="mt-10">
        <div class="flex justify-center rounded-full">
          <div class="relative">
            <span aria-hidden="true" class="absolute inset-0 h-16 w-16 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img alt="" class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
          </div>
        </div>
        <div class="mt-4 text-center text-xl font-semibold text-gray-900">Emily Harper</div>
        <div class="text-center text-lg font-normal text-gray-600">Lead Scientist at DarkLabs</div>
      </figcaption>
    </figure>
  </div>
</section>

Related Examples

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.2k
Review cards with social proof icons

Author:
kishan pc

1 year ago

2.2k
Testimonial for dark theme

Author:
Sophia Baker

2 years ago

10.1k
Testimonial card

Author:
Amit Pachange

2 years ago

11.4k
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.2k
interactive testimonial with Tailwind CSS and Alpine.js

Author:
Michael Andreuzza

1 year ago

2.3k
Customer testimonies grid

Author:
Sameer Sultana

2 years ago

19.8k
Twitter Testimonials Showcase with Tailwind CSS

Author:
EliteAI Tools

7 months ago

862
Testimonials
Testimonial Card for landing pages.

Author:
Prashant

3 years ago

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

Author:
INGRIDE MUZIRANENGE

4 months ago

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

Author:
Akram Khan

1 year ago

2.7k
Minimal Testimonial Card

Author:
Amit Pachange

2 years ago

8.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components