FreeMarketing

Founder Bento Grid

Use this on agency pages, SaaS homepages, and service landing pages to group important proof points into a scannable, modern grid.

ReactTailwind CSSMotionBento

2-4 weeks

MVP delivery

100%

Source-code ownership

24 hrs

First reply

4.9/5

Founder rating

Overview

A compact animated bento grid for showing product delivery proof points.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash

npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash

npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash

npm install framer-motion

Usage

tsx

<FounderBentoGrid />

Founder Bento Grid.tsx

tsx

"use client";

import { motion } from "framer-motion";

const items = [
  ["2-4 weeks", "MVP delivery"],
  ["100%", "Source-code ownership"],
  ["24 hrs", "First reply"],
  ["4.9/5", "Founder rating"],
];

export function FounderBentoGrid() {
  return (
    <div className="grid grid-cols-2 gap-3 rounded-xl border border-white/10 bg-zinc-950 p-4 text-white">
      {items.map(([value, label], index) => (
        <motion.div
          key={label}
          initial={{ opacity: 0, y: 10 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ delay: index * 0.06 }}
          className={"rounded-lg border border-white/10 bg-white/[0.04] p-4 " + (index === 0 ? "col-span-2" : "")}
        >
          <p className="text-2xl font-black">{value}</p>
          <p className="mt-1 text-xs text-zinc-400">{label}</p>
        </motion.div>
      ))}
    </div>
  );
}