πŸ“„ tailwindcss/plus/ui-blocks/application-ui/application-shells/multi-column

File: multi-column.md | Updated: 11/15/2025

Source: https://tailwindcss.com/plus/ui-blocks/application-ui/application-shells/multi-column

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

Multi-Column Layouts

Use these Tailwind CSS multi-column examples to build interfaces with multiple columns, such as email inboxes, project management software, or interfaces with nested menus or setting screens. These layouts are designed and built by the Tailwind CSS team, and include a variety of different styles and layouts. All layouts are fully responsive and optimized for desktop, tablet, and mobile screen sizes.

Full-width three-column


Preview

Get the code β†’

Full-width three-column


Preview

Get the code β†’

Full-width secondary column on right


Preview

Get the code β†’

Full-width secondary column on right


Preview

Get the code β†’

Constrained three column


Preview

Get the code β†’

Constrained three column


Preview

Get the code β†’

Constrained with sticky columns


Preview

Get the code β†’

Constrained with sticky columns


Preview

Get the code β†’

Full-width with narrow sidebar


Preview

Get the code β†’

Full-width with narrow sidebar


Preview

Get the code β†’

Full-width with narrow sidebar and header


Preview

Get the code β†’

Full-width with narrow sidebar and header


Preview

Get the code β†’