Creative Bento Grid – Modern Services Section

A bold and responsive Bento Grid for presenting services, performance metrics and calls to action. Built entirely with Tailwind CSS and featuring vibrant colors, rounded cards and smooth hover effects.

This tailwind example is contributed by Blanaru Casian, on 19-Jul-2026. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Card

Author Blanaru Casian

Tailwind v3.4 136

Fork Fullscreen

<section class="min-h-screen bg-[#f4f2ff] px-6 py-20">
  <div class="mx-auto max-w-6xl">
    <div class="mb-12 max-w-2xl">
      <span class="text-sm font-black uppercase tracking-[0.25em] text-violet-600">
        Unsere Leistungen
      </span>

<h2 class="mt-4 text-4xl font-black tracking-tight text-slate-950 sm:text-6xl">
        Alles, was dein digitales Produkt braucht.
      </h2>
    </div>

<div>
            <p class="mb-3 text-sm text-violet-300">01 / DEVELOPMENT</p>
            <h3 class="text-3xl font-black">Websites mit Charakter.</h3>
            <p class="mt-3 max-w-lg text-slate-400">
              Schnell, responsiv und entwickelt für echte Ergebnisse.
            </p>
          </div>
        </div>
      </article>

<article class="group min-h-72 rounded-[2rem] bg-lime-300 p-8 text-slate-950 transition duration-300 hover:-translate-y-2 hover:shadow-2xl">
        <div class="flex h-full flex-col justify-between">
          <span class="text-5xl transition group-hover:rotate-12">⚡</span>

<div>
            <p class="mb-3 text-sm font-bold">PERFORMANCE</p>
            <h3 class="text-3xl font-black">Blitzschnell.</h3>
            <p class="mt-3 font-medium text-slate-700">
              Optimiert für Core Web Vitals und maximale Geschwindigkeit.
            </p>
          </div>
        </div>
      </article>

<article class="rounded-[2rem] bg-white p-8 shadow-sm transition hover:shadow-xl">
        <p class="text-sm font-bold text-slate-400">LIGHTHOUSE SCORE</p>
        <div class="mt-10 text-7xl font-black text-violet-600">98</div>

<article class="rounded-[2rem] bg-violet-600 p-8 text-white">
        <div class="flex h-full min-h-64 flex-col justify-between">
          <div class="flex -space-x-3">
            <div class="h-12 w-12 rounded-full border-4 border-violet-600 bg-pink-300"></div>
            <div class="h-12 w-12 rounded-full border-4 border-violet-600 bg-cyan-300"></div>
            <div class="h-12 w-12 rounded-full border-4 border-violet-600 bg-amber-300"></div>
          </div>

<div>
            <h3 class="text-3xl font-black">Gemeinsam besser.</h3>
            <p class="mt-3 text-violet-200">
              Transparente Kommunikation vom Konzept bis zum Launch.
            </p>
          </div>
        </div>
      </article>

<article class="group rounded-[2rem] bg-orange-400 p-8 text-slate-950 transition hover:bg-orange-300">
        <div class="flex h-full min-h-64 flex-col justify-between">
          <span class="self-end text-5xl transition duration-300 group-hover:translate-x-2">
            ↗
          </span>

<div>
            <p class="text-sm font-bold">BEREIT?</p>
            <h3 class="mt-3 text-3xl font-black">Projekt starten.</h3>
          </div>
        </div>
      </article>
    </div>
  </div>
</section>

Related Examples

opulent
this a page didicated for laptops,phones using tailwindcss

ishimwe shadad

1 year ago

1.9k
Feature Section Cards

Akram Khan

2 years ago

2.7k
Product hunt showcase section

Leon Bachmann

3 years ago

10.8k
About us card

Sienna

3 years ago

12.3k
payement cart virtual
payement cart virtual

Omer fils ELENGA

6 months ago

434
3D card
it is a 3D card

Bonimater

1 year ago

1.5k
Responsive Tailwind CSS Listing Cards
This is a collection of responsive listing cards built with Tailwind CSS, optimized for modern web applications. The component features a flexbox layout, ensuring seamless responsiveness across mobile, tablet, and laptop screens. Each card includes an image, title, and description, styled for both light and dark modes. Perfect for showcasing products, portfolio items, or blog posts.

Abhiraj

1 year ago

2.8k
Responsive card grid
responsive card grid for articles

Mr Robot

3 years ago

16.6k
Pricing section Lima
Pricing section Lima with responsive design

Mubashir hussain

2 years ago

2.9k
Game Character Cards
Simple game character cards selection

Diavox Jerome Soriano

1 year ago

1.8k
content section

Crimson

1 year ago

1.6k
Clean Architectural Blog & News Section Grid
A sleek, modern, and minimal blog section designed for architecture, portfolio, or agency websites. Features landscape card layouts, top-aligned post titles for consistent grid alignment, category badges, publication dates with icons, and a smooth outlined CTA button.

Alief Malik

1 month ago

77