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

• • Marketing

  • Application UI

  • Ecommerce

  • Documentation

• Application Shells

  • Stacked Layouts

  • Sidebar Layouts

  • Multi-Column Layouts

• Headings

  • Page Headings

  • Card Headings

  • Section Headings

• Data Display

  • Description Lists

  • Stats

  • Calendars

• Lists

  • Stacked Lists

  • Tables

  • Grid Lists

  • Feeds

• Forms

  • Form Layouts

  • Input Groups

  • Select Menus

  • Sign-in and Registration

  • Textareas

  • Radio Groups

  • Checkboxes

  • Toggles

  • Action Panels

  • Comboboxes

• Feedback

  • Alerts

  • Empty States

• Navigation

  • Navbars

  • Pagination

  • Tabs

  • Vertical Navigation

  • Sidebar Navigation

  • Breadcrumbs

  • Progress Bars

  • Command Palettes

• Overlays

  • Modal Dialogs

  • Drawers

  • Notifications

• Elements

  • Avatars

  • Badges

  • Dropdowns

  • Buttons

  • Button Groups

• Layout

  • Containers

  • Cards

  • List containers

  • Media Objects

  • Dividers

• Page Examples

  • Home Screens

  • Detail Screens

  • Settings Screens

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

Stacked Layouts

Use these Tailwind CSS stacked layout examples to build interfaces where the page is full width and the navigation bar is positioned at the top. These layouts are designed and built by the Tailwind CSS team, and include a variety of different styles. All layouts are fully responsive and optimized for desktop, tablet, and mobile screen sizes.

With lighter page header

---

PreviewCode

HTMLReactVue

With lighter page header

---

PreviewCode

HTMLReactVue

With bottom border

---

Preview

Get the code →

With bottom border

---

Preview

Get the code →

On subtle background

---

Preview

Get the code →

On subtle background

---

Preview

Get the code →

Branded nav with compact lighter page header

---

Preview

Get the code →

Branded nav with compact lighter page header

---

Preview

Get the code →

With overlap

---

Preview

Get the code →

With overlap

---

Preview

Get the code →

Brand nav with overlap

---

Preview

Get the code →

Brand nav with overlap

---

Preview

Get the code →

Branded nav with lighter page header

---

Preview

Get the code →

Branded nav with lighter page header

---

Preview

Get the code →

With compact lighter page header

---

Preview

Get the code →

With compact lighter page header

---

Preview

Get the code →

Two-row navigation with overlap

---

Preview

Get the code →

Two-row navigation with overlap

---

Preview

Get the code →