Creative Bento Gallery

A modern bento-style gallery combining differently sized image cards in a structured and visually engaging layout.

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 Other Grid

Author JUGENDRA GANGWAR

Tailwind v3.4 254 2

Fork Fullscreen

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 auto-rows-[minmax(140px,auto)] gap-5 p-6 max-w-7xl mx-auto">
  <div class="group relative col-span-1 sm:col-span-2 lg:col-span-4 lg:row-span-2 rounded-3xl overflow-hidden border border-gray-200 shadow-sm hover:shadow-xl transition-all duration-300">
    <img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1000&h=700&fit=crop" alt="Earth from space at night showing city lights" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
    <div class="absolute inset-0 bg-gradient-to-t from-black/85 via-black/20 to-transparent"></div>
    <div class="relative h-full flex flex-col justify-end p-6 sm:p-8 min-h-[280px] lg:min-h-0">
      <h3 class="text-white text-2xl sm:text-3xl font-bold mb-2">Global Infrastructure</h3>
      <p class="text-white/80 text-sm sm:text-base max-w-md">Deployed across 40+ regions worldwide, delivering sub-50ms latency to over a billion users every day.</p>
    </div>
  </div>
  <div class="group relative col-span-1 sm:col-span-1 lg:col-span-2 rounded-3xl overflow-hidden border border-gray-200 bg-gradient-to-br from-indigo-500 to-purple-600 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 p-6 flex flex-col justify-between">
    <div>
      <p class="text-white text-4xl font-bold mb-1">99.99%</p>
      <p class="text-white/80 text-sm">Platform uptime guaranteed</p>
    </div>
  </div>
  <div class="group relative col-span-1 sm:col-span-1 lg:col-span-2 rounded-3xl overflow-hidden border border-gray-200 bg-white shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 p-6 flex flex-col justify-between">
    <div>
      <h3 class="text-gray-900 text-lg font-semibold mb-1">Enterprise Security</h3>
      <p class="text-gray-600 text-sm">SOC 2 Type II certified with end-to-end encryption on every request.</p>
    </div>
  </div>
  <div class="group relative col-span-1 sm:col-span-2 lg:col-span-2 lg:row-span-2 rounded-3xl overflow-hidden border border-gray-200 shadow-sm hover:shadow-xl transition-all duration-300">
    <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=700&h=900&fit=crop" alt="Team collaborating around a table with laptops" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
    <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/10 to-transparent"></div>
    <div class="relative h-full flex flex-col justify-end p-6 min-h-[280px] lg:min-h-0">
      <h3 class="text-white text-xl font-bold mb-2">Built for Teams</h3>
      <p class="text-white/80 text-sm">Real-time collaboration tools that keep everyone in sync, wherever they work.</p>
    </div>
  </div>
  <div class="group relative col-span-1 sm:col-span-1 lg:col-span-2 rounded-3xl overflow-hidden border border-gray-200 bg-white shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 p-6 flex flex-col justify-between">
    <div>
      <p class="text-gray-900 text-4xl font-bold mb-1">3.2M</p>
      <p class="text-gray-600 text-sm">Requests processed per second</p>
    </div>
  </div>
  <div class="group relative col-span-1 sm:col-span-1 lg:col-span-2 rounded-3xl overflow-hidden border border-gray-200 bg-gradient-to-br from-rose-500 to-orange-500 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 p-6 flex flex-col justify-between">
    <div>
      <h3 class="text-white text-lg font-semibold mb-1">24/7 Support</h3>
      <p class="text-white/85 text-sm">Real humans, real answers, average response time under 2 minutes.</p>
    </div>
  </div>
  <div class="group relative col-span-1 sm:col-span-2 lg:col-span-3 rounded-3xl overflow-hidden border border-gray-200 shadow-sm hover:shadow-xl transition-all duration-300">
    <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=900&h=500&fit=crop" alt="Analytics dashboard displaying data charts" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
    <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/10 to-transparent"></div>
    <div class="relative h-full flex flex-col justify-end p-6 min-h-[220px]">
      <h3 class="text-white text-xl font-bold mb-2">Actionable Analytics</h3>
      <p class="text-white/80 text-sm">Turn raw usage data into clear insights with customizable dashboards.</p>
    </div>
  </div>
  <div class="group relative col-span-1 sm:col-span-2 lg:col-span-3 rounded-3xl overflow-hidden border border-gray-200 bg-gray-900 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 p-6 flex flex-col justify-between">
    <div>
      <h3 class="text-white text-xl font-bold mb-2">200+ Integrations</h3>
      <p class="text-gray-400 text-sm">Connect the tools your team already uses in just a few clicks, no code required.</p>
    </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