Source: https://tailwindcss.com/plus/ui-blocks/application-ui/navigation/tabs

• • 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

Tabs

Use these Tailwind CSS tabs components to group content into tabbed sections, such as settings pages or resources in different states. These components are designed and built by the Tailwind CSS team, and include a variety of different styles and layouts.

Tabs with underline

---

Preview

Get the code →

Tabs with underline

---

Preview

Get the code →

Tabs with underline and icons

---

Preview

Get the code →

Tabs with underline and icons

---

Preview

Get the code →

Tabs in pills

---

Preview

Get the code →

Tabs in pills

---

Preview

Get the code →

Tabs in pills on gray

---

Preview

Get the code →

Tabs in pills on gray

---

Preview

Get the code →

Tabs in pills with brand color

---

Preview

Get the code →

Tabs in pills with brand color

---

Preview

Get the code →

Full-width tabs with underline

---

Preview

Get the code →

Full-width tabs with underline

---

Preview

Get the code →

Bar with underline

---

Preview

Get the code →

Bar with underline

---

Preview

Get the code →

Tabs with underline and badges

---

Preview

Get the code →

Tabs with underline and badges

---

Preview

Get the code →

Simple

---

Preview

Get the code →

Simple

---

Preview

Get the code →