Home
yousef
Testimonial wall

Testimonial wall

Forked from> @yousef-ali/testimonial-wall

added light mode support

This tailwind example is contributed by yousef, on 02-Apr-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are endorsement,review

Testimonial

Author yousef

3.1k

Fork Fullscreen

<section class="max-w-5xl mx-auto w-full px-10 dark:bg-gray-800 dark:text-white">
  <div class="flex items-center justify-center flex-col gap-y-2 py-5">
    <h2 class="text-2xl md:text-3xl lg:text-4xl font-bold">Testimonials</h2>
    <p class="text-lg font-medium text-slate-700/70 dark:text-gray-400">Discover how our service can benefit you</p>
  </div>
  <div class="grid grid-cols-1 lg:grid-cols-5 gap-5 w-full">
    <div
      class="border p-7 rounded-xl bg-white dark:bg-gray-700 drop-shadow-md border-neutral-200/50 col-span-2 flex flex-col gap-y-10 justify-between">
      <div class="flex flex-col gap-y-3.5">
        <p class="font-bold text-xl">Brilliant house to rent</p>
        <p class="font-medium text-slate-700/90 dark:text-gray-300">All eFounders teams have moved to Cycle for all
          things product management and it is truly a game-changer.</p>
      </div>
      <div class="flex flex-col">
        <img src="https://randomuser.me/api/portraits/women/54.jpg" alt="Jane Cooper" class="h-10 w-10">
        <p class="pt-2 text-sm font-semibold">Jane Cooper</p>
        <p class="text-sm font-medium text-slate-700/70 dark:text-gray-400">CEO at ABC Corporation</p>
      </div>
    </div>
    <div
      class="border p-7 rounded-xl bg-white dark:bg-gray-700 drop-shadow-md border-neutral-200/50 col-span-3 flex flex-col gap-y-10 justify-between">
      <div class="flex flex-col gap-y-3.5">
        <p class="font-bold text-xl">Efficient customer support</p>
        <p class="font-medium text-slate-700/90 dark:text-gray-300">The customer support team at our service is
          incredibly responsive and helpful. They went above and beyond to assist me with my issue.</p>
      </div>
      <div class="flex flex-col">
        <img src="https://randomuser.me/api/portraits/women/30.jpg" alt="John Doe" class="h-10 w-10">
        <p class="pt-2 text-sm font-semibold">Emily Smith</p>
        <p class="text-sm font-medium text-slate-700/70 dark:text-gray-400">Marketing Manager at ABC Company</p>
      </div>
    </div>
    <div
      class="border p-7 rounded-xl bg-white dark:bg-gray-700 drop-shadow-md border-neutral-200/50 col-span-3 flex flex-col gap-y-10 justify-between">
      <div class="flex flex-col gap-y-3.5">
        <p class="font-bold text-xl">Seamless integration process</p>
        <p class="font-medium text-slate-700/90 dark:text-gray-300">Integrating our systems with our service was smooth
          and hassle-free. The support team guided us through every step of the process.</p>
      </div>
      <div class="flex flex-col">
        <img src="https://randomuser.me/api/portraits/women/90.jpg" alt="Jane Doe" class="h-10 w-10">
        <p class="pt-2 text-sm font-semibold">Sarah Brown</p>
        <p class="text-sm font-medium text-slate-700/70 dark:text-gray-400">CTO at XYZ Corporation</p>
      </div>
    </div>
    <div
      class="border p-7 rounded-xl bg-white dark:bg-gray-700 drop-shadow-md border-neutral-200/50 col-span-2 flex flex-col gap-y-10 justify-between">
      <div class="flex flex-col gap-y-3.5">
        <p class="font-bold text-xl">Reliable service uptime</p>
        <p class="font-medium text-slate-700/90 dark:text-gray-300">Our service has consistently maintained high uptime,
          ensuring that our operations run smoothly without any disruptions.</p>
      </div>
      <div class="flex flex-col">
        <img src="https://randomuser.me/api/portraits/men/90.jpg" alt="Ash Doe" class="h-10 w-10">
        <p class="pt-2 text-sm font-semibold">James White</p>
        <p class="text-sm font-medium text-slate-700/70 dark:text-gray-400">COO at XYZ Corporation</p>
      </div>
    </div>
  </div>
</section>

Related Examples

Testimonial wall

Author:
yousef

1 year ago

3.2k
Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Author:
Ijila Itunu

3 weeks ago

135
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
Testimonial cards
each card contains a customer quote, an image of the customer, and their name.

Author:
Komal Jain

1 year ago

10.3k
Testimonial for dark theme

Author:
Sophia Baker

2 years ago

10k
basichtml
this is basic html

Author:
Anonymous

3 months ago

147
masonary grids effect for cards using columns
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

Author:
rohit whyphy

7 months ago

1.1k
Testimonials

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

6 months ago

1.4k
User review cards
Resposive testemonial cards

Author:
Erik Hyatt

2 years ago

14.9k
Testimonial Card

Author:
Anja Müller

2 years ago

6.7k
Customer testimonies grid

Author:
Sameer Sultana

2 years ago

19.8k
Testimonial card

Author:
Amit Pachange

2 years ago

11.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components