Image Testimonial Grid

Testimonials 525

About

Pinterest-style testimonial cards featuring user profile images, names, and quotes over scenic backgrounds. Ideal for showcasing customer stories, social proof, or community highlights in a visually engaging way.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Image Testimonial Grid to your project and fits it to your theme.

Code

How Image Testimonial Grid is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from 'react';
import { MasonryGrid } from '@/components/ui/image-testimonial-grid'; // Adjust the import path as needed

// --- Data for the cards ---
const testimonials = [
    {
        profileImage: 'https://cdn.21st.dev/assets/mirror/a6/a634d4f02fe5b77804943c1d74b8d70e35ffe26454e0e9af9717432a2c72bfde.jpg',
        name: 'Anaam Farooq',
        feedback: "Kashmir's Hidden Winter Wonderland",
        mainImage: 'https://cdn.21st.dev/assets/mirror/e6/e65a9bed6f3ac4780519b0047cb73eafce53a1ac6820da0b7daf4eb48d178edc.jpg',
    },
    {
        profileImage: 'https://cdn.21st.dev/assets/mirror/d8/d8dab29a5736d5c2b0084d720d3db02c785560071609be501541922928fdf831.jpg',
        name: 'neophyte_clicker',
        feedback: 'Celebrating Diwali Through The Lens',
        mainImage: 'https://cdn.21st.dev/assets/mirror/c8/c8c4168fd74ed81d91e31cd79a552239ec00eea04e3d87945fe569d18a84b78a.jpg',
    },
    {
        profileImage: 'https://cdn.21st.dev/assets/mirror/76/7641e5550cab8285a253f41bd03ff144ccd06bf847577af55bcb8b45e2908649.jpg',
        name: 'Badshah1341',
        feedback: 'A Sunset Symphony in Gold',
        mainImage: 'https://cdn.21st.dev/assets/mirror/49/4915dfcfa43fc5689a2c142af75ff23925207edbfed9b9ecf02f105be6ad10e7.jpg',
    },
    {
        profileImage: 'https://cdn.21st.dev/assets/mirror/dc/dc47fd5c6525a85ad39123b776bc6d19267d1be0a6962a8d89a3eed16ec8d7d3.jpg',
        name: 'mohsinsyasin_',
        feedback: 'realme Insider Event Kashmir',
        mainImage: 'https://cdn.21st.dev/assets/mirror/4d/4d31450a10fcb8b4bf0db66c708695f30b96ba0a39f1d9698d54bfff9be4c8c2.jpg',
    },
    {
        profileImage: 'https://cdn.21st.dev/assets/mirror/f0/f07b84f12ef125cbb837a7bd64da401992f5f62bd55fee10d01cd3dcc8abae80.jpg',
        name: 'Naaz khan',
        feedback: 'Illuminate the Night with the P3 Pro',
        mainImage: 'https://cdn.21st.dev/assets/mirror/bf/bfa0e5c45572b61d57dbfcbbeaccd2fabace44828db428bc2fa0079ccf3f9372.jpg',
    },
    {
        profileImage: 'https://cdn.21st.dev/assets/mirror/1b/1b3bb15506d4e4378f8c31f163859bba7155263c02d06221e3b376285498764e.jpg',
        name: 'Venky_smile',
        feedback: 'Highlights from realme',
        mainImage: 'https://cdn.21st.dev/assets/mirror/1f/1fbc761ab05b00ba3fd750ae25670684c3a8159cbd773401b6b587c6e149c4fa.jpg',
    },
    {
        profileImage: 'https://cdn.21st.dev/assets/mirror/35/3560ff7cbc9e86c333fccefe248e3ea5cdade4e46f6b2fc85d84755896cb2e5a.jpg',
        name: 'LoserAnant',
        feedback: '14 Pro Series Launch Event Recap',
        mainImage: 'https://cdn.21st.dev/assets/mirror/e8/e8a342f265a46c21a89e81924102d27f7dd205937c7357b45844886ac1c0ff7d.jpg',
    },
    {
        profileImage: 'https://cdn.21st.dev/assets/mirror/e6/e6ee2e0593ec044ab8b7a4697e34cfb92551c62b9495bf8a524ba905845ddb5d.jpg',
        name: 'Isabella',
        feedback: 'The mountains are calling me.',
        mainImage: 'https://cdn.21st.dev/assets/mirror/41/41c53fd89fde691f276255f6787ab367446ce6966964af3f089ae01971f9f743.jpg',
    },
];

// --- Reusable Card Component ---
const TestimonialCard = ({ profileImage, name, feedback, mainImage }: (typeof testimonials)[0]) => (
  <div className="relative rounded-2xl overflow-hidden group transition-transform duration-300 ease-in-out hover:scale-105">
    <img
      src={mainImage}
      alt={feedback}
      className="w-full h-auto object-cover"
      onError={(e) => {
        e.currentTarget.src = 'https://cdn.21st.dev/assets/mirror/62/622147c3a5c3fcd93c2eff1c22e7d69535e41ce2ff7e53e23b74d4a99d9bf762.svg';
      }}
    />
    <div className="absolute inset-0 bg-gradient-to-b from-black/60 via-black/20 to-transparent" />
    <div className="absolute top-0 left-0 p-4 text-white">
      <div className="flex items-center gap-3 mb-2">
        <img
          src={profileImage}
          className="w-8 h-8 rounded-full border-2 border-white/80"
          alt={name}
          onError={(e) => {
            e.currentTarget.src = 'https://cdn.21st.dev/assets/mirror/70/7096a27b1a65059923fdabb49f2ccda1052a0ac25625304fcd520599d0f926d5.svg';
          }}
        />
        <span className="font-semibold text-sm drop-shadow-md">{name}</span>
      </div>
      <p className="text-sm font-medium leading-tight drop-shadow-md">{feedback}</p>
    </div>
  </div>
);


// --- Demo Component ---
const MasonryGridDemo = () => {
  const [columns, setColumns] = React.useState(4);

  // Function to determine columns based on screen width
  const getColumns = (width: number) => {
    if (width < 640) return 1;    // sm
    if (width < 1024) return 2;   // lg
    if (width < 1280) return 3;   // xl
    return 4;                     // 2xl and up
  };

  React.useEffect(() => {
    const handleResize = () => {
      setColumns(getColumns(window.innerWidth));
    };

    handleResize(); // Set initial columns on mount

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <div className="w-full min-h-screen p-4 sm:p-6 lg:p-8 bg-background text-foreground">
      <div className="max-w-7xl mx-auto">
        <h1 className="text-3xl md:text-4xl font-bold mb-8 text-center">What People Are Saying</h1>
        <MasonryGrid columns={columns} gap={4}>
          {testimonials.map((card, index) => (
            <TestimonialCard key={index} {...card} />
          ))}
        </MasonryGrid>
      </div>
    </div>
  );
};

export default MasonryGridDemo;