Clean Image Grid Gallery

A clean and balanced image gallery arranged in equal-sized columns for a simple, organized presentation.

This tailwind example is contributed by JUGENDRA GANGWAR, on 17-Jul-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Masonry, Image grid

Card Image gallery Grid

Author JUGENDRA GANGWAR

Tailwind v3.4 139 2

Fork Fullscreen

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 p-6 max-w-7xl mx-auto">
  <div class="group bg-white rounded-2xl border border-gray-200 shadow-sm hover:shadow-xl  transition-all duration-300 overflow-hidden flex flex-col">
    <div class="overflow-hidden">
      <img src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=400&fit=crop" alt="Team collaborating on laptops" class="w-full h-52 object-cover  transition-transform duration-300" />
    </div>
    <div class="p-5 flex flex-col flex-1">
      <h3 class="text-lg font-semibold text-gray-900 mb-2">Modern Workspace Solutions</h3>
      <p class="text-sm text-gray-600 mb-4 flex-1">Discover tools and techniques that help remote teams stay productive and connected.</p>
      <a href="#" class="inline-flex items-center text-sm font-medium text-blue-600 hover:text-blue-800 mt-auto">
        Read more
        <svg class="w-4 h-4 ml-1  transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
      </a>
    </div>
  </div>
  <div class="group bg-white rounded-2xl border border-gray-200 shadow-sm hover:shadow-xl  transition-all duration-300 overflow-hidden flex flex-col">
    <div class="overflow-hidden">
      <img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=600&h=400&fit=crop" alt="Person sketching design concepts" class="w-full h-52 object-cover  transition-transform duration-300" />
    </div>
    <div class="p-5 flex flex-col flex-1">
      <h3 class="text-lg font-semibold text-gray-900 mb-2">Principles of Visual Hierarchy</h3>
      <p class="text-sm text-gray-600 mb-4 flex-1">Learn how to guide the eye and structure content for maximum clarity and impact.</p>
      <a href="#" class="inline-flex items-center text-sm font-medium text-purple-600 hover:text-purple-800 mt-auto">
        Read more
        <svg class="w-4 h-4 ml-1  transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
      </a>
    </div>
  </div>
  <div class="group bg-white rounded-2xl border border-gray-200 shadow-sm hover:shadow-xl  transition-all duration-300 overflow-hidden flex flex-col">
    <div class="overflow-hidden">
      <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=600&h=400&fit=crop" alt="Developer working with code on screen" class="w-full h-52 object-cover  transition-transform duration-300" />
    </div>
    <div class="p-5 flex flex-col flex-1">
      <h3 class="text-lg font-semibold text-gray-900 mb-2">Writing Clean and Scalable Code</h3>
      <p class="text-sm text-gray-600 mb-4 flex-1">Best practices for structuring projects that grow gracefully over time.</p>
      <a href="#" class="inline-flex items-center text-sm font-medium text-emerald-600 hover:text-emerald-800 mt-auto">
        Read more
        <svg class="w-4 h-4 ml-1  transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
      </a>
    </div>
  </div>
  <div class="group bg-white rounded-2xl border border-gray-200 shadow-sm hover:shadow-xl  transition-all duration-300 overflow-hidden flex flex-col">
    <div class="overflow-hidden">
      <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=600&h=400&fit=crop" alt="Data charts and analytics dashboard" class="w-full h-52 object-cover  transition-transform duration-300" />
    </div>
    <div class="p-5 flex flex-col flex-1">
      <h3 class="text-lg font-semibold text-gray-900 mb-2">Turning Data Into Decisions</h3>
      <p class="text-sm text-gray-600 mb-4 flex-1">A practical guide to reading dashboards and translating metrics into strategy.</p>
      <a href="#" class="inline-flex items-center text-sm font-medium text-amber-600 hover:text-amber-800 mt-auto">
        Read more
        <svg class="w-4 h-4 ml-1  transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
      </a>
    </div>
  </div>
  <div class="group bg-white rounded-2xl border border-gray-200 shadow-sm hover:shadow-xl  transition-all duration-300 overflow-hidden flex flex-col">
    <div class="overflow-hidden">
      <img src="https://images.unsplash.com/photo-1465101046530-73398c7f28ca?w=600&h=400&fit=crop" alt="Mountain landscape with hiking trail" class="w-full h-52 object-cover  transition-transform duration-300" />
    </div>
    <div class="p-5 flex flex-col flex-1">
      <h3 class="text-lg font-semibold text-gray-900 mb-2">Trails Worth the Early Start</h3>
      <p class="text-sm text-gray-600 mb-4 flex-1">A curated list of scenic hikes for travelers chasing quiet mornings and big views.</p>
      <a href="#" class="inline-flex items-center text-sm font-medium text-teal-600 hover:text-teal-800 mt-auto">
        Read more
        <svg class="w-4 h-4 ml-1  transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
      </a>
    </div>
  </div>
  <div class="group bg-white rounded-2xl border border-gray-200 shadow-sm hover:shadow-xl  transition-all duration-300 overflow-hidden flex flex-col">
    <div class="overflow-hidden">
      <img src="https://images.unsplash.com/photo-1490645935967-10de6ba17061?w=600&h=400&fit=crop" alt="Fresh vegetables and healthy meal prep" class="w-full h-52 object-cover  transition-transform duration-300" />
    </div>
    <div class="p-5 flex flex-col flex-1">
      <h3 class="text-lg font-semibold text-gray-900 mb-2">Simple Habits for a Healthier Week</h3>
      <p class="text-sm text-gray-600 mb-4 flex-1">Small, sustainable changes to your routine that add up to lasting wellbeing.</p>
      <a href="#" class="inline-flex items-center text-sm font-medium text-rose-600 hover:text-rose-800 mt-auto">
        Read more
        <svg class="w-4 h-4 ml-1  transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
      </a>
    </div>
  </div>
  <div class="group bg-white rounded-2xl border border-gray-200 shadow-sm hover:shadow-xl  transition-all duration-300 overflow-hidden flex flex-col">
    <div class="overflow-hidden">
      <img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=600&h=400&fit=crop" alt="Startup team brainstorming ideas" class="w-full h-52 object-cover  transition-transform duration-300" />
    </div>
    <div class="p-5 flex flex-col flex-1">
      <h3 class="text-lg font-semibold text-gray-900 mb-2">Building a Startup That Lasts</h3>
      <p class="text-sm text-gray-600 mb-4 flex-1">Lessons from founders on resilience, focus, and knowing when to pivot.</p>
      <a href="#" class="inline-flex items-center text-sm font-medium text-indigo-600 hover:text-indigo-800 mt-auto">
        Read more
        <svg class="w-4 h-4 ml-1  transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
      </a>
    </div>
  </div>
  <div class="group bg-white rounded-2xl border border-gray-200 shadow-sm hover:shadow-xl  transition-all duration-300 overflow-hidden flex flex-col">
    <div class="overflow-hidden">
      <img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=600&h=400&fit=crop" alt="Bookshelf filled with colorful books" class="w-full h-52 object-cover  transition-transform duration-300" />
    </div>
    <div class="p-5 flex flex-col flex-1">
      <h3 class="text-lg font-semibold text-gray-900 mb-2">Books That Change How You Think</h3>
      <p class="text-sm text-gray-600 mb-4 flex-1">A hand-picked reading list spanning philosophy, science, and storytelling.</p>
      <a href="#" class="inline-flex items-center text-sm font-medium text-orange-600 hover:text-orange-800 mt-auto">
        Read more
        <svg class="w-4 h-4 ml-1  transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
      </a>
    </div>
  </div>
</div>

Related Examples

Responsive Grid with Featured image

_Amar_

4 years ago

13.2k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Amit Pachange

4 years ago

53.6k
Responsive Feature Card

Gopi Yadav

4 years ago

14.3k
Responsive Article Section

Prashant

4 years ago

17.2k
Products card grid
Example of product card grid with product image and pricing

Noob

3 years ago

24.8k
Info cards
Show various statistics on your website

Arya

3 years ago

12k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25k
Features grid

Sophia Baker

3 years ago

10.7k
Blog post cards
responsive blog post cards

Mr Robot

3 years ago

13.4k
Card grid for posts

Mr Robot

3 years ago

24.1k
Responsive card grid
responsive card grid for articles

Mr Robot

3 years ago

16.6k
Card grid section
Display article/blog grid

Mr Robot

3 years ago

31.2k