Responsive Masonry Layout

Cards 122
About
A beautiful, responsive masonry component that adapts seamlessly to various screen sizes.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Responsive Masonry Layout to your project and fits it to your theme.
Code

How Responsive Masonry Layout is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { Masonry } from "@/components/ui/responsive-masonry-layout";

const MasonryDemo = () => {

  const imageCards = [
    <div
      key="1"
      className="group bg-white rounded-xl shadow-2xl/10 border-0 overflow-hidden transition-all duration-300 hover:-translate-y-1"
    >
      <div className="relative overflow-hidden p-4">
        <img
          src="https://cdn.21st.dev/assets/mirror/45/454f938e8045748463a252d56c49ca8755e73aa16e4bee2e8c1d894bdb188c1b.jpg"
          alt="Nature Photography"
          className="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105"
        />
        
      </div>
      <div className="p-5">
        <h3 className="font-semibold text-gray-900 text-lg mb-2 group-hover:text-blue-600 transition-colors">
          Nature Photography
        </h3>
        <p className="text-gray-600 text-sm leading-relaxed">
          Beautiful landscapes and wildlife captured in stunning detail
        </p>
        <div className="mt-3 flex items-center text-xs text-gray-400">
          <span className="bg-green-100 text-green-700 px-2 py-1 rounded-full">
            Landscapes
          </span>
        </div>
      </div>
    </div>,

    <div
      key="2"
      className="group bg-white rounded-xl shadow-2xl/10 border-0 overflow-hidden transition-all duration-300 hover:-translate-y-1"
    >
      <div className="relative overflow-hidden p-4">
        <img
          src="https://cdn.21st.dev/assets/mirror/9e/9ec5d6cc457eccbef73bae15748491c6672b6b551f52b45f54d1cb3cfedae671.jpg"
          alt="Mountain Views"
          className="w-full h-64 object-cover rounded-md transition-transform duration-300 group-hover:scale-105"
        />
        
      </div>
      <div className="p-5">
        <h3 className="font-semibold text-gray-900 text-lg mb-2 group-hover:text-blue-600 transition-colors">
          Mountain Views
        </h3>
        <p className="text-gray-600 text-sm leading-relaxed">
          Scenic mountain ranges and majestic peaks reaching for the sky
        </p>
        <div className="mt-3 flex items-center text-xs text-gray-400">
          <span className="bg-blue-100 text-blue-700 px-2 py-1 rounded-full">
            Mountains
          </span>
        </div>
      </div>
    </div>,

    <div
      key="3"
      className="group bg-white rounded-xl shadow-2xl/10 border-0 overflow-hidden transition-all duration-300 hover:-translate-y-1"
    >
      <div className="relative overflow-hidden p-4">
        <img
          src="https://cdn.21st.dev/assets/mirror/fe/fe6e37ffed577ea9d30d09a3ae90ba1b9deb5907edbce462fe5b56fa2b7a7ba3.jpg"
          alt="City Life"
          className="w-full h-32 object-cover rounded-md transition-transform duration-300 group-hover:scale-105"
        />
        
      </div>
      <div className="p-5">
        <h3 className="font-semibold text-gray-900 text-lg mb-2 group-hover:text-blue-600 transition-colors">
          City Life
        </h3>
        <p className="text-gray-600 text-sm leading-relaxed">
          Urban photography showcasing modern architecture and vibrant street
          scenes
        </p>
        <div className="mt-3 flex items-center text-xs text-gray-400">
          <span className="bg-purple-100 text-purple-700 px-2 py-1 rounded-full">
            Urban
          </span>
        </div>
      </div>
    </div>,

    <div
      key="4"
      className="group bg-white rounded-xl shadow-2xl/10 border-0 overflow-hidden transition-all duration-300 hover:-translate-y-1"
    >
      <div className="relative overflow-hidden p-4">
        <img
          src="https://cdn.21st.dev/assets/mirror/ee/ee2c256b62cb828088d822e1e7205e99b16526978b21f7591fc1a19a0743afa5.jpg"
          alt="Sunset Collection"
          className="w-full h-56 object-cover rounded-md transition-transform duration-300 group-hover:scale-105"
        />
        
      </div>
      <div className="p-5">
        <h3 className="font-semibold text-gray-900 text-lg mb-2 group-hover:text-blue-600 transition-colors">
          Sunset Collection
        </h3>
        <p className="text-gray-600 text-sm leading-relaxed">
          Golden hour moments that paint the sky in warm, ethereal colors
        </p>
        <div className="mt-3 flex items-center text-xs text-gray-400">
          <span className="bg-orange-100 text-orange-700 px-2 py-1 rounded-full">
            Sunsets
          </span>
        </div>
      </div>
    </div>,

    <div
      key="5"
      className="group bg-white rounded-xl shadow-2xl/10 border-0 overflow-hidden transition-all duration-300 hover:-translate-y-1"
    >
      <div className="relative overflow-hidden p-4">
        <img
          src="https://cdn.21st.dev/assets/mirror/59/59f661fc72da880cf7855e4ab766f8b29203df14db1cf808c730cdc2d7b08ba7.jpg"
          alt="Ocean Waves"
          className="w-full h-44 object-cover rounded-md transition-transform duration-300 group-hover:scale-105"
        />
        
      </div>
      <div className="p-5">
        <h3 className="font-semibold text-gray-900 text-lg mb-2 group-hover:text-blue-600 transition-colors">
          Ocean Waves
        </h3>
        <p className="text-gray-600 text-sm leading-relaxed">
          Peaceful coastal scenes with rhythmic waves and endless horizons
        </p>
        <div className="mt-3 flex items-center text-xs text-gray-400">
          <span className="bg-cyan-100 text-cyan-700 px-2 py-1 rounded-full">
            Ocean
          </span>
        </div>
      </div>
    </div>,

    <div
      key="6"
      className="group bg-white rounded-xl shadow-2xl/10 border-0 overflow-hidden transition-all duration-300 hover:-translate-y-1"
    >
      <div className="relative overflow-hidden p-4">
        <img
          src="https://cdn.21st.dev/assets/mirror/1a/1a6b18a207b245985f416e60df8fc5b0434ca13c88f24ab9b6181924551d9b44.jpg"
          alt="Forest Path"
          className="w-full h-52 object-cover rounded-md transition-transform duration-300 group-hover:scale-105"
        />
        
      </div>
      <div className="p-5">
        <h3 className="font-semibold text-gray-900 text-lg mb-2 group-hover:text-blue-600 transition-colors">
          Forest Path
        </h3>
        <p className="text-gray-600 text-sm leading-relaxed">
          Mystical woodland trails surrounded by ancient trees and dappled light
        </p>
        <div className="mt-3 flex items-center text-xs text-gray-400">
          <span className="bg-emerald-100 text-emerald-700 px-2 py-1 rounded-full">
            Forest
          </span>
        </div>
      </div>
    </div>,

    <div
      key="7"
      className="group bg-white rounded-xl shadow-2xl/10 border-0 overflow-hidden transition-all duration-300 hover:-translate-y-1"
    >
      <div className="relative overflow-hidden p-4">
        <img
          src="https://cdn.21st.dev/assets/mirror/b7/b773dbb6b2dcd67fe89d6d581b4d20c318b25915a0608974ad3d5a48cc164adb.jpg"
          alt="Abstract Art"
          className="w-full h-60 object-cover rounded-md transition-transform duration-300 group-hover:scale-105"
        />
        
      </div>
      <div className="p-5">
        <h3 className="font-semibold text-gray-900 text-lg mb-2 group-hover:text-blue-600 transition-colors">
          Abstract Art
        </h3>
        <p className="text-gray-600 text-sm leading-relaxed">
          Creative digital compositions exploring form, color, and imagination
        </p>
        <div className="mt-3 flex items-center text-xs text-gray-400">
          <span className="bg-pink-100 text-pink-700 px-2 py-1 rounded-full">
            Abstract
          </span>
        </div>
      </div>
    </div>,

    <div
      key="8"
      className="group bg-white rounded-xl shadow-2xl/10 border-0 overflow-hidden transition-all duration-300 hover:-translate-y-1"
    >
      <div className="relative overflow-hidden p-4">
        <img
          src="https://cdn.21st.dev/assets/mirror/50/50d73a6680c615a52957a183866051adf17f76b9176a23332bfc5fd1e66712ff.jpg"
          alt="Desert Landscape"
          className="w-full h-40 object-cover rounded-md transition-transform duration-300 group-hover:scale-105"
        />
        
      </div>
      <div className="p-5">
        <h3 className="font-semibold text-gray-900 text-lg mb-2 group-hover:text-blue-600 transition-colors">
          Desert Landscape
        </h3>
        <p className="text-gray-600 text-sm leading-relaxed">
          Vast sandy horizons where silence meets infinite space
        </p>
        <div className="mt-3 flex items-center text-xs text-gray-400">
          <span className="bg-yellow-100 text-yellow-700 px-2 py-1 rounded-full">
            Desert
          </span>
        </div>
      </div>
    </div>,

    <div
      key="9"
      className="group bg-white rounded-xl shadow-2xl/10 border-0 overflow-hidden transition-all duration-300 hover:-translate-y-1"
    >
      <div className="relative overflow-hidden p-4">
        <img
          src="https://cdn.21st.dev/assets/mirror/17/17b7f627f3c97db211e271ef59f423390b8a11ee3f818eaf8034f5958fda5a38.jpg"
          alt="Winter Wonderland"
          className="w-full h-56 object-cover rounded-md transition-transform duration-300 group-hover:scale-105"
        />
        
      </div>
      <div className="p-5">
        <h3 className="font-semibold text-gray-900 text-lg mb-2 group-hover:text-blue-600 transition-colors">
          Winter Wonderland
        </h3>
        <p className="text-gray-600 text-sm leading-relaxed">
          Snow-covered landscapes creating a pristine, magical atmosphere
        </p>
        <div className="mt-3 flex items-center text-xs text-gray-400">
          <span className="bg-slate-100 text-slate-700 px-2 py-1 rounded-full">
            Winter
          </span>
        </div>
      </div>
    </div>,

    <div
      key="10"
      className="group bg-white rounded-xl shadow-2xl/10 border-0 overflow-hidden transition-all duration-300 hover:-translate-y-1"
    >
      <div className="relative overflow-hidden p-4">
        <img
          src="https://cdn.21st.dev/assets/mirror/af/afe3f98b195b9be7bd4b14d3316fe6e13618bec15aef3368e952e9fff88c6cc8.jpg"
          alt="Street Photography"
          className="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105"
        />
        
      </div>
      <div className="p-5">
        <h3 className="font-semibold text-gray-900 text-lg mb-2 group-hover:text-blue-600 transition-colors">
          Street Photography
        </h3>
        <p className="text-gray-600 text-sm leading-relaxed">
          Candid moments capturing the authentic rhythm of daily life
        </p>
        <div className="mt-3 flex items-center text-xs text-gray-400">
          <span className="bg-gray-100 text-gray-700 px-2 py-1 rounded-full">
            Street
          </span>
        </div>
      </div>
    </div>,

    <div
      key="11"
      className="group bg-white rounded-xl shadow-2xl/10 border-0 overflow-hidden transition-all duration-300 hover:-translate-y-1"
    >
      <div className="relative overflow-hidden p-4">
        <img
          src="https://cdn.21st.dev/assets/mirror/20/204db2770a5c271867d45c67bafed941be7fa2c3a95e7770d22ad33a65d8e3a3.jpg"
          alt="Architectural Marvels"
          className="w-full h-68 object-cover rounded-md transition-transform duration-300 group-hover:scale-105"
        />
        
      </div>
      <div className="p-5">
        <h3 className="font-semibold text-gray-900 text-lg mb-2 group-hover:text-blue-600 transition-colors">
          Architectural Marvels
        </h3>
        <p className="text-gray-600 text-sm leading-relaxed">
          Modern building designs that push the boundaries of form and function
        </p>
        <div className="mt-3 flex items-center text-xs text-gray-400">
          <span className="bg-indigo-100 text-indigo-700 px-2 py-1 rounded-full">
            Architecture
          </span>
        </div>
      </div>
    </div>,

    <div
      key="12"
      className="group bg-white rounded-xl shadow-2xl/10 border-0 overflow-hidden transition-all duration-300 hover:-translate-y-1"
    >
      <div className="relative overflow-hidden p-4">
        <img
          src="https://cdn.21st.dev/assets/mirror/1a/1a5484de2e86ca627e3b0eab074704c943308a1cdf9bebf68b94746bb54ab1dc.jpg"
          alt="Garden Blooms"
          className="w-full h-36 object-cover rounded-md transition-transform duration-300 group-hover:scale-105"
        />
        
      </div>
      <div className="p-5">
        <h3 className="font-semibold text-gray-900 text-lg mb-2 group-hover:text-blue-600 transition-colors">
          Garden Blooms
        </h3>
        <p className="text-gray-600 text-sm leading-relaxed">
          Colorful flower collections celebrating nature's artistic palette
        </p>
        <div className="mt-3 flex items-center text-xs text-gray-400">
          <span className="bg-rose-100 text-rose-700 px-2 py-1 rounded-full">
            Flowers
          </span>
        </div>
      </div>
    </div>,
  ];

  return (
    <div
      className={` min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-16 px-6`}
    >
      <div className="max-w-7xl mx-auto space-y-20">
        {/* Header */}
        <div className="text-center">
          <h1 className="text-5xl font-bold bg-gradient-to-r from-gray-900 to-gray-600 bg-clip-text text-transparent mb-6">
            Responsive Masonry Layout
          </h1>
        </div>

        {/* Image Gallery Demo */}
        <section>
          <Masonry>{imageCards}</Masonry>
        </section>
      </div>
    </div>
  );
};

export { MasonryDemo };