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.4k

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