Image Gallery

Galleries 123

About

Here is Image Gallery component

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

Code

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

Usage.tsx

import React from "react";

export default function Example() {
  return (
    <>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap');
    
        * {
          font-family: 'Poppins', sans-serif;
        }
      `}</style>

      <section className="w-full flex flex-col items-center justify-start py-12">
        <div className="max-w-3xl text-center px-4">
          <h1 className="text-3xl font-semibold">Explore the Library</h1>
          <p className="text-sm text-slate-500 mt-2">
            A visual collection of our most recent works – each piece crafted
            with intention, emotion, and style.
          </p>
        </div>

        <div className="flex flex-wrap items-center justify-center mt-10 mx-auto gap-4">
          <img
            className="max-w-56 h-80 object-cover rounded-lg hover:-translate-y-1 transition-all duration-300"
            src="https://cdn.21st.dev/assets/mirror/ac/ac210d91aa78e473a05ee903ba8f7a2f69cf56ba36eb3af83baf5d68c0fc62ed.jpg"
            alt="image"
          />
          <img
            className="max-w-56 h-80 object-cover rounded-lg hover:-translate-y-1 transition-all duration-300"
            src="https://cdn.21st.dev/assets/mirror/7c/7cff13d46320d6b0f91b97aa5e188e3a548ca8f892a78d692c26d1b3ffed951b.jpg"
            alt="image"
          />
          <img
            className="max-w-56 h-80 object-cover rounded-lg hover:-translate-y-1 transition-all duration-300"
            src="https://cdn.21st.dev/assets/mirror/91/919380737e900023d0184b54b6b56751579e1f4f35b54910315a6653a958b8ed.jpg"
            alt="image"
          />
          <img
            className="max-w-56 h-80 object-cover rounded-lg hover:-translate-y-1 transition-all duration-300"
            src="https://cdn.21st.dev/assets/mirror/4c/4c87b279dfe815cf28bc6267ba3e9eca6fcb745006643711df1f089075d75be9.jpg"
            alt="image"
          />
        </div>
      </section>
    </>
  );
}