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 208

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

Basic US Flag Card
Here's a set of card components styled with Tailwind CSS that represent various US-themed elements:

Uwase Alliance

1 year ago

865
Card Product
Card Product for List Product

Ronny Camacho

9 months ago

777
Portfolio form
Portfolio form

Joseph Melvin Kanu

2 years ago

3.5k
google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Abhiraj

1 year ago

2k
Food App Web design

Aitrik Saha

1 year ago

2.5k
Simple card layout with image

Leon Bachmann

3 years ago

11.3k
Testimonials

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.3k
Testimonial card with image

Simon Scheffer

3 years ago

12.8k
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

2.1k
Pricing card
Reveal details on hover

Anonymous

2 years ago

5.3k
card simple

Raul antonio de la cruz hernandez

8 months ago

628
dismissible cookie banner with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

3k