Home
Abdul Jabbar Al Nahid
Testimonial Section

Testimonial Section

A responsive, SEO-friendly testimonial section for Ab Nahid Agency clients

This tailwind example is contributed by Abdul Jabbar Al Nahid, on 08-Jul-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are endorsement,review

Testimonial Other Grid

Author Abdul Jabbar Al Nahid

Fork Fullscreen

<section class="w-full min-h-screen bg-gray-50 py-16 px-4 flex flex-col items-center">
  <div class="max-w-4xl mx-auto text-center mb-12">
    <h2 class="text-4xl font-bold text-gray-900 mb-4 font-epilogue">
      Our trusted clients
    </h2>
    <p class="text-gray-600 max-w-2xl mx-auto">
      Our mission is to drive progress and enhance the lives of our
      customers by delivering superior products and services that exceed
      expectations.
    </p>
  </div>

<div class="w-full max-w-7xl grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
    
    <div class="relative text-center transition-transform duration-300 p-6 bg-white rounded-[30px] outline-1 outline-offset-[-1px] outline-[#f5f7f9] flex flex-col justify-center items-center gap-5 hover:scale-105 hover:rotate-[4deg] shadow-[0px_25px_52px_-12px_rgba(17,17,17,0.20)]">
      <img src="https://i.ibb.co/39QLHv5H/1693926367335.jpg" alt="Hugo Pakula" class="w-16 h-16 rounded-full object-cover border-4 border-white shadow-md" />
      <div class="space-y-6">
        <h4 class="text-[#323b47] text-xl font-bold leading-tight">Hugo Pakula</h4>
        <p class="text-[#58677d] text-lg font-medium leading-snug">
          Working with Ab Nahid Agency was a game-changer. Their web development and SEO support significantly boosted my site's visibility and performance.
        </p>
      </div>
      <div class="p-3.5 rounded-full outline-1 outline-offset-[-1px] outline-[#e9eff7] flex justify-center items-center">
        <img src="https://img.icons8.com/?size=100&id=38968&format=png&color=000000" alt="quote" class="w-6 h-6" />
      </div>
    </div>

<div class="relative text-center transition-transform duration-300 p-6 bg-white rounded-[30px] outline-1 outline-offset-[-1px] outline-[#f5f7f9] flex flex-col justify-center items-center gap-5 hover:scale-105 hover:rotate-[4deg] shadow-[0px_25px_52px_-12px_rgba(17,17,17,0.20)]">
      <img src="https://i.ibb.co/Zz7HrXgJ/1750602389688-e-1756944000-v-beta-t-rsy-A7-Ftr-NJaz-CX1-VS9lkuh12-Hon-WNhh-Kes1n4wd6k-SA.jpg" alt="Ajmaine Bhuiyan" class="w-16 h-16 rounded-full object-cover border-4 border-white shadow-md" />
      <div class="space-y-6">
        <h4 class="text-[#323b47] text-xl font-bold leading-tight">Ajmaine Bhuiyan</h4>
        <p class="text-[#58677d] text-lg font-medium leading-snug">
          They delivered exactly what I needed — a modern, fast, and SEO-optimized website for my startup. Highly recommended for entrepreneurs.
        </p>
      </div>
      <div class="p-3.5 rounded-full outline-1 outline-offset-[-1px] outline-[#e9eff7] flex justify-center items-center">
        <img src="https://img.icons8.com/?size=100&id=38968&format=png&color=000000" alt="quote" class="w-6 h-6" />
      </div>
    </div>

<div class="relative text-center transition-transform duration-300 p-6 bg-white rounded-[30px] outline-1 outline-offset-[-1px] outline-[#f5f7f9] flex flex-col justify-center items-center gap-5 hover:scale-105 hover:rotate-[4deg] shadow-[0px_25px_52px_-12px_rgba(17,17,17,0.20)]">
      <img src="https://i.ibb.co/HLCKTh8F/1742201429729.jpg" alt="Josh Gardner" class="w-16 h-16 rounded-full object-cover border-4 border-white shadow-md" />
      <div class="space-y-6">
        <h4 class="text-[#323b47] text-xl font-bold leading-tight">Josh Gardner</h4>
        <p class="text-[#58677d] text-lg font-medium leading-snug">
          Their UI/UX design skills are impressive. My site now looks professional and loads super fast across all devices. Excellent communication too!
        </p>
      </div>
      <div class="p-3.5 rounded-full outline-1 outline-offset-[-1px] outline-[#e9eff7] flex justify-center items-center">
        <img src="https://img.icons8.com/?size=100&id=38968&format=png&color=000000" alt="quote" class="w-6 h-6" />
      </div>
    </div>

<div class="relative text-center transition-transform duration-300 p-6 bg-white rounded-[30px] outline-1 outline-offset-[-1px] outline-[#f5f7f9] flex flex-col justify-center items-center gap-5 hover:scale-105 hover:rotate-[4deg] shadow-[0px_25px_52px_-12px_rgba(17,17,17,0.20)]">
      <img src="https://i.ibb.co/39QLHv5H/1693926367335.jpg" alt="Hugo Pakula" class="w-16 h-16 rounded-full object-cover border-4 border-white shadow-md" />
      <div class="space-y-6">
        <h4 class="text-[#323b47] text-xl font-bold leading-tight">Hugo Pakula</h4>
        <p class="text-[#58677d] text-lg font-medium leading-snug">
          Working with Ab Nahid Agency was a game-changer. Their web development and SEO support significantly boosted my site's visibility and performance.
        </p>
      </div>
      <div class="p-3.5 rounded-full outline-1 outline-offset-[-1px] outline-[#e9eff7] flex justify-center items-center">
        <img src="https://img.icons8.com/?size=100&id=38968&format=png&color=000000" alt="quote" class="w-6 h-6" />
      </div>
    </div>

</div>
</section>

Related Examples

Customer testimonies grid

Author:
Sameer Sultana

2 years ago

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

Author:
Coastal UI

4 months ago

601
Table CRUD
CRUD TABLE DESIGN

Author:
Abhiraj

4 months ago

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

4 months ago

690
Active Beauty Main Page

Author:
Maxim

3 months ago

445
Contact Form Component
A multi-step, responsive contact form with a modern dark-themed design. The form includes four steps: name, email, phone number, and message. It features a side panel with contact information and a sleek, gradient-styled interface using Tailwind CSS.

Author:
Muhammad Umair Arshad

3 months ago

472
Responsive Hero Section with Typewriter Effect
A modern hero section featuring a typewriter animation effect, social media links, and responsive design. Includes a user avatar placeholder and a clean dark gradient background. Built with Tailwind CSS and Font Awesome icons. Perfect for personal portfolio websites.

Author:
Muhammad Umair Arshad

3 months ago

177
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Author:
Hamza Atig

2 months ago

530
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

2 months ago

430
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Author:
Hamza Atig

2 months ago

326
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Author:
Hamza Atig

2 months ago

203
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

2 months ago

460

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components