Source: https://tailwindcss.com/plus/ui-blocks/marketing/sections/bento-grids

• • Marketing

  • Application UI

  • Ecommerce

  • Documentation

• Page Sections

  • Hero Sections

  • Feature Sections

  • CTA Sections

  • Bento Grids

  • Pricing Sections

  • Header Sections

  • Newsletter Sections

  • Stats

  • Testimonials

  • Blog Sections

  • Contact Sections

  • Team Sections

  • Content Sections

  • Logo Clouds

  • FAQs

  • Footers

• Elements

  • Headers

  • Flyout Menus

  • Banners

• Feedback

  • 404 Pages

• Page Examples

  • Landing Pages

  • Pricing Pages

  • About Pages

5-day Mini-Course

Build UIs that don’t suck.

Short, tactical video lessons from the creator of Tailwind CSS, delivered directly to your inbox every day for a week.

Get the free course

Bento Grids

Use these Tailwind CSS bento grid examples to create visually engaging feature sections that highlight key aspects of your product or service. These card layouts include various different grid patterns, and include both light and dark examples.

Three column bento grid

---

PreviewCode

HTMLReactVue

Three column bento grid

---

PreviewCode

HTMLReactVue

Two row bento grid

---

Preview

Get the code →

Two row bento grid

---

Preview

Get the code →

Two row bento grid with three column second row

---

Preview

Get the code →

Two row bento grid with three column second row

---

Preview

Get the code →