Bento Feature Grid

Original · free

A bento-style grid mixing one large hero cell, a tall stat cell and several compact cards to give features a clear visual hierarchy.

byWeb InnoventixReact + Tailwind

bentogriddark-mode

Open

Copy prompt gives Claude Code, Cursor or v0 a ready-to-paste prompt that recreates this exact component.

npx shadcn@latest add https://webinnoventix.com/r/feature-bento-grid.json

Open

feature-bento-grid.tsx

export default function FeatureBentoGrid() {
  return (
    <section className="bg-white px-6 py-16 dark:bg-zinc-950 md:py-24">
      <div className="mx-auto max-w-6xl">
        <div className="mx-auto max-w-2xl text-center">
          <p className="text-sm font-semibold uppercase tracking-widest text-indigo-600 dark:text-indigo-400">
            Built to fit
          </p>
          <h2 className="mt-4 text-balance text-3xl font-bold tracking-tight text-zinc-900 sm:text-4xl dark:text-white">
            A platform shaped around how you actually work
          </h2>
        </div>

        <div className="mt-14 grid grid-cols-1 gap-4 md:auto-rows-[12rem] md:grid-cols-6">
          {/* Large feature */}
          <article className="group relative flex flex-col justify-between overflow-hidden rounded-2xl border border-zinc-200 bg-gradient-to-br from-indigo-50 to-white p-6 md:col-span-4 md:row-span-2 dark:border-zinc-800 dark:from-indigo-500/10 dark:to-zinc-900/40">
            <div
              aria-hidden="true"
              className="pointer-events-none absolute -right-10 -top-10 h-40 w-40 rounded-full bg-indigo-400/20 blur-2xl dark:bg-indigo-500/20"
            />
            <div className="relative">
              <span className="inline-flex h-11 w-11 items-center justify-center rounded-xl bg-indigo-600 text-white shadow-sm">
                <svg
                  aria-hidden="true"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth={1.6}
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="h-6 w-6"
                >
                  <rect x="3" y="4" width="18" height="14" rx="2" />
                  <path d="M3 9h18M8 13h5" />
                </svg>
              </span>
              <h3 className="mt-5 text-xl font-bold text-zinc-900 dark:text-white">
                One workspace for every project
              </h3>
              <p className="mt-2 max-w-md text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
                Documents, tasks and conversations sit side by side, so switching context never means switching tools. Everyone sees the same living page.
              </p>
            </div>
            <div className="relative mt-6 flex gap-2" aria-hidden="true">
              <div className="h-16 flex-1 rounded-lg bg-white/70 ring-1 ring-indigo-900/5 dark:bg-white/5 dark:ring-white/10" />
              <div className="h-16 flex-1 rounded-lg bg-white/70 ring-1 ring-indigo-900/5 dark:bg-white/5 dark:ring-white/10" />
              <div className="h-16 flex-1 rounded-lg bg-indigo-500/20 ring-1 ring-indigo-500/30" />
            </div>
          </article>

          {/* Tall feature */}
          <article className="group relative flex flex-col justify-between overflow-hidden rounded-2xl border border-zinc-200 bg-white p-6 md:col-span-2 md:row-span-2 dark:border-zinc-800 dark:bg-zinc-900/50">
            <div>
              <span className="inline-flex h-11 w-11 items-center justify-center rounded-xl bg-emerald-50 text-emerald-600 ring-1 ring-emerald-200 dark:bg-emerald-500/10 dark:text-emerald-400 dark:ring-emerald-500/30">
                <svg
                  aria-hidden="true"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth={1.6}
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="h-6 w-6"
                >
                  <path d="M12 2v20M2 12h20" />
                  <circle cx="12" cy="12" r="9" />
                </svg>
              </span>
              <h3 className="mt-5 text-lg font-semibold text-zinc-900 dark:text-white">
                Works offline, syncs later
              </h3>
              <p className="mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
                Keep writing on the train. Changes queue up and merge cleanly the moment you reconnect.
              </p>
            </div>
            <dl className="mt-6 grid grid-cols-2 gap-3">
              <div className="rounded-lg bg-zinc-50 p-3 dark:bg-zinc-800/50">
                <dt className="text-xs text-zinc-500 dark:text-zinc-500">Uptime</dt>
                <dd className="text-lg font-bold text-zinc-900 dark:text-white">99.9%</dd>
              </div>
              <div className="rounded-lg bg-zinc-50 p-3 dark:bg-zinc-800/50">
                <dt className="text-xs text-zinc-500 dark:text-zinc-500">Sync</dt>
                <dd className="text-lg font-bold text-zinc-900 dark:text-white">Instant</dd>
              </div>
            </dl>
          </article>

          {/* Small features */}
          <article className="rounded-2xl border border-zinc-200 bg-white p-6 md:col-span-2 dark:border-zinc-800 dark:bg-zinc-900/50">
            <span className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-amber-50 text-amber-600 ring-1 ring-amber-200 dark:bg-amber-500/10 dark:text-amber-400 dark:ring-amber-500/30">
              <svg
                aria-hidden="true"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth={1.6}
                strokeLinecap="round"
                strokeLinejoin="round"
                className="h-5 w-5"
              >
                <path d="M12 2 4 6v6c0 4 3 7 8 10 5-3 8-6 8-10V6z" />
              </svg>
            </span>
            <h3 className="mt-4 text-base font-semibold text-zinc-900 dark:text-white">
              Encrypted by default
            </h3>
            <p className="mt-1 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
              Data is protected at rest and in transit, always.
            </p>
          </article>

          <article className="rounded-2xl border border-zinc-200 bg-white p-6 md:col-span-2 dark:border-zinc-800 dark:bg-zinc-900/50">
            <span className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-rose-50 text-rose-600 ring-1 ring-rose-200 dark:bg-rose-500/10 dark:text-rose-400 dark:ring-rose-500/30">
              <svg
                aria-hidden="true"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth={1.6}
                strokeLinecap="round"
                strokeLinejoin="round"
                className="h-5 w-5"
              >
                <path d="M4 17v4M4 3v10M12 12v9M12 3v3M20 15v6M20 3v8" />
                <circle cx="4" cy="15" r="2" />
                <circle cx="12" cy="9" r="2" />
                <circle cx="20" cy="11" r="2" />
              </svg>
            </span>
            <h3 className="mt-4 text-base font-semibold text-zinc-900 dark:text-white">
              Tune it to your team
            </h3>
            <p className="mt-1 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
              Fields, views and workflows bend to your process.
            </p>
          </article>

          <article className="flex items-center gap-4 rounded-2xl border border-zinc-200 bg-white p-6 md:col-span-2 dark:border-zinc-800 dark:bg-zinc-900/50">
            <span className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-sky-50 text-sky-600 ring-1 ring-sky-200 dark:bg-sky-500/10 dark:text-sky-400 dark:ring-sky-500/30">
              <svg
                aria-hidden="true"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth={1.6}
                strokeLinecap="round"
                strokeLinejoin="round"
                className="h-5 w-5"
              >
                <path d="M4 7h16M4 12h16M4 17h10" />
              </svg>
            </span>
            <div>
              <h3 className="text-base font-semibold text-zinc-900 dark:text-white">
                Connects to your stack
              </h3>
              <p className="mt-1 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
                Over eighty integrations, ready to switch on.
              </p>
            </div>
          </article>
        </div>
      </div>
    </section>
  );
}

Dependencies

None — React + Tailwind only.

Licence

Built by Web Innoventix. Free for personal and commercial use, no attribution required.

Built by Web Innoventix

Need a custom interface, a full website, or SEO that gets you cited by AI? We design, build and rank it end to end.

Get a free quote

Similar components

Browse all →

Three Column Icon Grid

Original

A responsive icon grid that presents six product capabilities as scannable cards, each with an inline SVG icon, title and short description.

Alternating Media Rows

Original

Three feature rows that alternate a text column with a CSS-built visual panel, walking the reader through a plan, measure and ship story.

Tabbed Feature Switcher

Original

A tabbed feature preview that switches panels using only native radio inputs and Tailwind peer variants, so it works with no JavaScript.

Stat Backed Features

Original

A feature layout that pairs each capability with a headline metric, so every claim is anchored to a measurable result.

Scroll-reveal bento grid

Original

An asymmetric bento feature grid whose cards stagger into view on scroll, lift on hover and feature an animated conic gradient border, shimmering headline, growing bar chart and a masked marquee tag strip.

Sticky scroll steps

Original

A scroll-linked how-it-works section where a sticky panel cross-fades between steps and a progress ring plus filling timeline track advance as you scroll through the process.

Spotlight hover feature cards

Original

A responsive feature card grid where each card follows the cursor with a radial spotlight glow, lifts and rotates its icon on hover, reveals a call to action, and sits above a scrolling logo marquee.

Animated marquee highlights band

Original

A bold feature band with an animated gradient background, floating blurred orbs, blur-in staggered headline, two opposing marquee pill rows and shimmering stat cards.

Bordered Feature Grid (2x2)

MIT

A two-column grid of bordered feature cards, each pairing an outlined icon with a title and supporting copy. Clean, enterprise-leaning layout with full dark-mode support.

Outlined Feature Cards with CTA

MIT

A three-column feature section with heading and intro, plus blue-outlined cards that each carry an icon, description, and a circular arrow call-to-action. Fully theme-aware.

Icon-Left Feature List

MIT

A centered heading over a three-column feature list, each row leading with a rounded icon badge and a 'Learn More' link. Classic marketing feature block, ported with added dark variants.

Hover-Reveal Bento Grid

MIT

The Magic UI bento pattern: a mixed-span grid of cards where the icon shrinks and the description lifts on hover to reveal a call-to-action. Self-contained (no framer-motion, no icon libs), pure CSS group-hover, with a glow background and full dark styling.