Bento Grid Component
A responsive bento grid for React and Tailwind CSS that turns product benefits into a clear visual hierarchy. Cards span naturally on desktop and stack cleanly on mobile.
Build faster
Production-ready blocks.
41 styles
MIT licensed
Copy the code
const features = [
{ title: 'Build faster', text: 'Production-ready blocks.', featured: true },
{ title: '41 styles', text: 'One coherent system.' },
{ title: 'MIT licensed', text: 'Use it commercially.' },
]
export function BentoGrid() {
return (
<section className="grid gap-4 md:grid-cols-2" aria-label="Product benefits">
{features.map(item => <article key={item.title} className={'rounded-3xl border p-6 ' + (item.featured ? 'bg-violet-600 text-white md:row-span-2' : 'bg-white')}>
<h3 className="text-xl font-bold">{item.title}</h3><p className="mt-2 opacity-70">{item.text}</p>
</article>)}
</section>
)
}Tailwind CSS · no dependencies · MIT licensed. Paste it straight into any React, Next.js or Vite project.
About the bento grid
This bento grid is part of Empire UI - a free, open-source library of 34+ component types rendered across 41 visual styles, from glassmorphism to neo-brutalism. Every block is copy-paste ready in React and Tailwind CSS with no runtime dependencies.
Want it in a different look? Browse all 41 styles or grab the matching glassmorphism components.