Bento Grids Tailwind CSS
Bento grids, inspired by the segmented Japanese bento box, are a UI/UX design trend that uses a grid-based layout to organize content into distinct sections.
Tailwind CSS
Dynamic Bento Grid Design
using tailwind css CDN
Bento Grids Tailwind CSS
<div class="bg-gray-50 py-24 sm:py-32">
<div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
<h2 class="text-center text-base/7 font-semibold text-indigo-600">
Deploy faster
</h2>
<p
class="mx-auto mt-2 max-w-lg text-center text-4xl font-semibold tracking-tight text-balance text-gray-950 sm:text-5xl"
>
Transform your idea to production
</p>
<div class="mt-10 grid gap-4 sm:mt-16 lg:grid-cols-3 lg:grid-rows-2">
<div class="relative lg:row-span-2">
<div
class="absolute inset-px rounded-lg bg-white lg:rounded-l-[2rem]"
></div>
<div
class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-l-[calc(2rem+1px)]"
>
<div class="px-8 pt-8 pb-3 sm:px-10 sm:pt-10 sm:pb-0">
<p
class="mt-2 text-lg font-medium tracking-tight text-gray-950 max-lg:text-center"
>
Mobile friendly
</p>
<p
class="mt-2 max-w-lg text-sm/6 text-gray-600 max-lg:text-center"
>
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure
qui lorem cupidatat commodo.
</p>
</div>
<div
class="@container relative min-h-[30rem] w-full grow max-lg:mx-auto max-lg:max-w-sm"
>
<div
class="absolute inset-x-10 top-10 bottom-0 overflow-hidden rounded-t-[12cqw] border-x-[3cqw] border-t-[3cqw] border-gray-700 bg-gray-900 shadow-2xl"
>
<img
class="size-full object-cover object-top"
src="https://tailwindcss.com/plus-assets/img/component-images/bento-03-mobile-friendly.png"
alt=""
/>
</div>
</div>
</div>
<div
class="pointer-events-none absolute inset-px rounded-lg shadow-sm ring-1 ring-black/5 lg:rounded-l-[2rem]"
></div>
</div>
<div class="relative max-lg:row-start-1">
<div
class="absolute inset-px rounded-lg bg-white max-lg:rounded-t-[2rem]"
></div>
<div
class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)]"
>
<div class="px-8 pt-8 sm:px-10 sm:pt-10">
<p
class="mt-2 p-4 text-lg font-medium tracking-tight text-gray-950 max-lg:text-center"
>
Performance
</p>
<p
class="mt-2 max-w-lg text-sm/6 text-gray-600 max-lg:text-center"
>
Lorem ipsum, dolor sit amet consectetur adipisicing elit
maiores impedit.
</p>
</div>
<div
class="flex flex-1 items-center justify-center px-8 max-lg:pt-10 max-lg:pb-12 sm:px-10 lg:pb-2"
>
<img
class="w-full max-lg:max-w-xs"
src="https://tailwindcss.com/plus-assets/img/component-images/bento-03-performance.png"
alt=""
/>
</div>
</div>
<div
class="pointer-events-none absolute inset-px rounded-lg shadow-sm ring-1 ring-black/5 max-lg:rounded-t-[2rem]"
></div>
</div>
<div
class="relative max-lg:row-start-3 lg:col-start-2 lg:row-start-2"
>
<div class="absolute inset-px rounded-lg bg-white"></div>
<div
class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]"
>
<div class="px-8 pt-8 sm:px-10 sm:pt-10">
<p
class="mt-2 text-lg font-medium tracking-tight text-gray-950 max-lg:text-center"
>
Security
</p>
<p
class="mt-2 max-w-lg text-sm/6 text-gray-600 max-lg:text-center"
>
Morbi viverra dui mi arcu sed. Tellus semper adipiscing
suspendisse semper morbi.
</p>
</div>
<div
class="@container flex flex-1 items-center max-lg:py-6 lg:pb-2"
>
<img
class="h-[min(152px,40cqw)] object-cover"
src="https://tailwindcss.com/plus-assets/img/component-images/bento-03-security.png"
alt=""
/>
</div>
</div>
<div
class="pointer-events-none absolute inset-px rounded-lg shadow-sm ring-1 ring-black/5"
></div>
</div>
<div class="relative lg:row-span-2">
<div
class="absolute inset-px rounded-lg bg-white max-lg:rounded-b-[2rem] lg:rounded-r-[2rem]"
></div>
<div
class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-r-[calc(2rem+1px)]"
>
<div class="px-8 pt-8 pb-3 sm:px-10 sm:pt-10 sm:pb-0">
<p
class="mt-2 text-lg font-medium tracking-tight text-gray-950 max-lg:text-center"
>
Powerful APIs
</p>
<p
class="mt-2 max-w-lg text-sm/6 text-gray-600 max-lg:text-center"
>
Sit quis amet rutrum tellus ullamcorper ultricies libero dolor
eget sem sodales gravida.
</p>
</div>
<div class="relative min-h-[30rem] w-full grow">
<div
class="absolute top-10 right-0 bottom-0 left-10 overflow-hidden rounded-tl-xl bg-gray-900 shadow-2xl"
>
<div class="flex bg-gray-800/40 ring-1 ring-white/5">
<div
class="-mb-px flex text-sm/6 font-medium text-gray-400"
>
<div
class="border-r border-b border-r-white/10 border-b-white/20 bg-white/5 px-4 py-2 text-white"
>
NotificationSetting.jsx
</div>
<div class="border-r border-gray-600/10 px-4 py-2">
App.jsx
</div>
</div>
</div>
<div class="px-6 pt-6 pb-14">
<!-- Your code example -->
</div>
</div>
</div>
</div>
<div
class="pointer-events-none absolute inset-px rounded-lg shadow-sm ring-1 ring-black/5 max-lg:rounded-b-[2rem] lg:rounded-r-[2rem]"
></div>
</div>
</div>
</div>
</div>
Two Columns Bento
Using Tailwind CSS CDN
Bento Grids Tailwind CSS
<div class="bg-gray-50 py-24 sm:py-32">
<div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
<h2 class="text-center text-base/7 font-semibold text-indigo-600">
Deploy faster
</h2>
<p
class="mx-auto mt-2 max-w-lg text-center text-4xl font-semibold tracking-tight text-balance text-gray-950 sm:text-5xl"
>
Transform your idea to production
</p>
<div class="mt-10 grid gap-4 sm:mt-16 lg:grid-cols-12">
<div class="relative lg:col-span-6">
<div
class="absolute inset-px rounded-lg bg-white max-lg:rounded-t-[2rem]"
></div>
<div
class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)]"
>
<div class="justify-center">
<img
class="w-full h-full max-lg:max-w-xs"
src="https://tailwindcss.com/plus-assets/img/component-images/bento-01-performance.png"
alt=""
/>
</div>
<div class="sm:px-10 max-lg:pb-12 lg:pb-8 mt-5">
<p
class="px-6 md:px-0 text-lg font-medium tracking-tight text-gray-950"
>
Lightning-fast builds
</p>
<p class="px-6 md:px-0 mt-2 max-w-lg text-sm/6 text-gray-600">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In
gravida justo et nulla efficitur, maximus egestas
sem,onsectetur adipiscing elit pellentesque.
</p>
<button class="px-6 md:px-0 mt-8">
<span
class="inline-flex items-center rounded-md boder border-indigo-600 px-8 py-3 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-gray-900/10 hover:ring-gray-900/20 cursor-pointer"
>
Get started
</span>
</button>
</div>
</div>
<div
class="pointer-events-none absolute inset-px rounded-lg shadow-sm ring-1 ring-black/5 max-lg:rounded-t-[2rem]"
></div>
</div>
<div class="relative lg:col-span-6">
<div
class="absolute inset-px rounded-lg bg-white max-lg:rounded-t-[2rem]"
></div>
<div
class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)]"
>
<div class="justify-center">
<img
class="w-full h-full max-lg:max-w-xs"
src="https://tailwindcss.com/plus-assets/img/component-images/bento-01-releases.png"
alt=""
/>
</div>
<div class="sm:px-10 max-lg:pb-12 lg:pb-8 mt-5">
<p
class="px-6 md:px-0 text-lg font-medium tracking-tight text-gray-950"
>
Push to deploy
</p>
<p class="px-6 md:px-0 mt-2 max-w-lg text-sm/6 text-gray-600">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In
gravida justo et nulla efficitur, maximus egestas
sem,onsectetur adipiscing elit pellentesque.
</p>
<button class="px-6 md:px-0 mt-8">
<span
class="inline-flex items-center rounded-md boder border-indigo-600 px-8 py-3 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-gray-900/10 hover:ring-gray-900/20 cursor-pointer"
>
Get started
</span>
</button>
</div>
</div>
<div
class="pointer-events-none absolute inset-px rounded-lg shadow-sm ring-1 ring-black/5 max-lg:rounded-t-[2rem]"
></div>
</div>
<div class="relative lg:col-span-4">
<div
class="absolute inset-px rounded-lg bg-white max-lg:rounded-t-[2rem]"
></div>
<div
class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)]"
>
<div class="flex h-96 justify-center">
<img
class="w-full h-full object-cover object-left"
src="https://tailwindcss.com/plus-assets/img/component-images/bento-01-speed.png"
alt=""
/>
</div>
<div class="sm:px-10 max-lg:pb-12 lg:pb-8 mt-5">
<p
class="px-6 md:px-0 text-lg font-medium tracking-tight text-gray-950"
>
Built for power users
</p>
<p class="px-6 md:px-0 mt-2 max-w-lg text-sm/6 text-gray-600">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In
gravida justo et nulla efficitur, maximus egestas
sem,onsectetur adipiscing elit pellentesque.
</p>
</button>
</div>
</div>
<div
class="pointer-events-none absolute inset-px rounded-lg shadow-sm ring-1 ring-black/5 max-lg:rounded-t-[2rem]"
></div>
</div>
<div class="relative lg:col-span-4">
<div
class="absolute inset-px rounded-lg bg-white max-lg:rounded-t-[2rem]"
></div>
<div
class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)]"
>
<div class="flex h-96 justify-center">
<img
class="w-full h-full object-cover"
src="https://tailwindcss.com/plus-assets/img/component-images/bento-01-integrations.png"
alt=""
/>
</div>
<div class="sm:px-10 max-lg:pb-12 lg:pb-8 mt-5">
<p
class="px-6 md:px-0 text-lg font-medium tracking-tight text-gray-950"
>
Connect your favorite tools
</p>
<p class="px-6 md:px-0 mt-2 max-w-lg text-sm/6 text-gray-600">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In
gravida justo et nulla efficitur, maximus egestas
sem,onsectetur adipiscing elit pellentesque.
</p>
</button>
</div>
</div>
<div
class="pointer-events-none absolute inset-px rounded-lg shadow-sm ring-1 ring-black/5 max-lg:rounded-t-[2rem]"
></div>
</div>
<div class="relative lg:col-span-4">
<div
class="absolute inset-px rounded-lg bg-white max-lg:rounded-t-[2rem]"
></div>
<div
class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)]"
>
<div class="flex justify-center h-96">
<img
class="w-full h-full object-cover"
src="https://tailwindcss.com/plus-assets/img/component-images/bento-01-network.png"
alt=""
/>
</div>
<div class="sm:px-10 max-lg:pb-12 lg:pb-8 mt-5">
<p
class="px-6 md:px-0 text-lg font-medium tracking-tight text-gray-950"
>
Globally distributed CDN
</p>
<p class="px-6 md:px-0 mt-2 max-w-lg text-sm/6 text-gray-600">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In
gravida justo et nulla efficitur, maximus egestas
sem,onsectetur adipiscing elit pellentesque.
</p>
</button>
</div>
</div>
<div
class="pointer-events-none absolute inset-px rounded-lg shadow-sm ring-1 ring-black/5 max-lg:rounded-t-[2rem]"
></div>
</div>
</div>
</div>
</div>
Two Row Bento Dark
Using Tailwind CSS CDN
Bento Grids Tailwind CSS
<div class= py-24 sm:py-32">
<div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
<h2 class="text-center text-base/7 font-semibold text-indigo-600">
Deploy faster
</h2>
<p
class="mx-auto mt-2 max-w-lg text-center text-4xl font-semibold tracking-tight text-balance text-gray-100 sm:text-5xl"
>
Transform your idea to production
</p>
<div class=" mt-10 grid gap-4 sm:mt-16 lg:grid-cols-12">
<div class="bg-gray-800 relative lg:col-span-8">
<div
class="absolute inset-px rounded-lg max-lg:rounded-t-[2rem]"
></div>
<div
class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)]"
>
<div class="justify-center">
<img
class="w-full h-full max-lg:max-w-xs"
src="https://tailwindcss.com/plus-assets/img/component-images/bento-02-releases.png"
alt=""
/>
</div>
<div class="sm:px-10 max-lg:pb-12 lg:pb-8 mt-5">
<p
class="px-6 md:px-0 text-lg font-medium tracking-tight text-gray-100"
>
Lightning-fast builds
</p>
<p class="px-6 md:px-0 mt-2 max-w-lg text-sm/6 text-gray-300">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In
gravida justo et nulla efficitur, maximus egestas
sem,onsectetur adipiscing elit pellentesque.
</p>
<button class="px-6 md:px-0 mt-8">
<span
class="inline-flex items-center rounded-md boder border-indigo-100 px-8 py-3 text-sm font-semibold text-gray-200 shadow-sm ring-1 ring-gray-300 hover:ring-gray-100 cursor-pointer"
>
Get started
</span>
</button>
</div>
</div>
<div
class="pointer-events-none absolute inset-px rounded-lg shadow-sm ring-1 ring-black/5 max-lg:rounded-t-[2rem]"
></div>
</div>
<div class="relative lg:col-span-4">
<div
class="absolute inset-px rounded-lg bg-gray-800 max-lg:rounded-t-[2rem]"
></div>
<div
class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)]"
>
<div class="flex h-96 justify-center">
<img
class="w-full h-full object-cover object-left"
src="https://tailwindcss.com/plus-assets/img/component-images/bento-02-integrations.png"
alt=""
/>
</div>
<div class="sm:px-10 max-lg:pb-12 lg:pb-8 mt-5">
<p
class="px-6 md:px-0 text-lg font-medium tracking-tight text-gray-100"
>
Connect your favorite tools
</p>
<p class="px-6 md:px-0 mt-2 max-w-lg text-sm/6 text-gray-300">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In
gravida justo et nulla efficitur, maximus egestas
sem,onsectetur adipiscing elit pellentesque.
</p>
</button>
</div>
</div>
<div
class="pointer-events-none absolute inset-px rounded-lg shadow-sm ring-1 ring-black/5 max-lg:rounded-t-[2rem]"
></div>
</div>
<div class="relative lg:col-span-4">
<div
class="absolute inset-px rounded-lg bg-gray-800 max-lg:rounded-t-[2rem]"
></div>
<div
class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)]"
>
<div class="flex h-96 justify-center">
<img
class="w-full h-full object-cover"
src="https://tailwindcss.com/plus-assets/img/component-images/bento-02-security.png"
alt=""
/>
</div>
<div class="sm:px-10 max-lg:pb-12 lg:pb-8 mt-5">
<p
class="px-6 md:px-0 text-lg font-medium tracking-tight text-gray-100"
>
Connect your favorite tools
</p>
<p class="px-6 md:px-0 mt-2 max-w-lg text-sm/6 text-gray-300">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In
gravida justo et nulla efficitur, maximus egestas
sem,onsectetur adipiscing elit pellentesque.
</p>
</button>
</div>
</div>
<div
class="pointer-events-none absolute inset-px rounded-lg shadow-sm ring-1 ring-black/5 max-lg:rounded-t-[2rem]"
></div>
</div>
<div class="relative lg:col-span-8">
<div
class="absolute inset-px rounded-lg bg-gray-800 max-lg:rounded-t-[2rem]"
></div>
<div
class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)]"
>
<div class="justify-center">
<img
class="w-full h-full max-lg:max-w-xs"
src="https://tailwindcss.com/plus-assets/img/component-images/bento-02-performance.png"
alt=""
/>
</div>
<div class="sm:px-10 max-lg:pb-12 lg:pb-8 mt-5">
<p
class="px-6 md:px-0 text-lg font-medium tracking-tight text-gray-100"
>
Lightning-fast builds
</p>
<p class="px-6 md:px-0 mt-2 max-w-lg text-sm/6 text-gray-300">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In
gravida justo et nulla efficitur, maximus egestas
sem,onsectetur adipiscing elit pellentesque.
</p>
<button class="px-6 md:px-0 mt-8">
<span
class="inline-flex items-center rounded-md boder border-indigo-600 px-8 py-3 text-sm font-semibold text-gray-300 shadow-sm ring-1 ring-gray-300 hover:ring-gray-100 cursor-pointer"
>
Get started
</span>
</button>
</div>
</div>
<div
class="pointer-events-none absolute inset-px rounded-lg shadow-sm ring-1 ring-black/5 max-lg:rounded-t-[2rem]"
></div>
</div>
</div>
</div>
</div>
Bento grids, inspired by the segmented Japanese bento box, are a UI/UX design trend that uses a grid-based layout to organize content into distinct sections. This approach enhances visual appeal, improves navigation, and reduces clutter, making it a popular choice for clean and user-friendly interfaces.
Code copied to clipboard