Source: https://tailwindcss.com/plus/ui-blocks/application-ui/data-display/description-lists

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

Description Lists

Use these Tailwind CSS description list components to present detailed information in a structured and readable format. These components are designed and built by the Tailwind CSS team, and include a variety of different styles and layouts.

Left-aligned

---

PreviewCode

HTMLReactVue

Left-aligned

---

PreviewCode

HTMLReactVue

Left-aligned in card

---

Preview

Get the code →

Left-aligned in card

---

Preview

Get the code →

Left-aligned striped

---

Preview

Get the code →

Left-aligned striped

---

Preview

Get the code →

Two-column

---

Preview

Get the code →

Two-column

---

Preview

Get the code →

Left-aligned with inline actions

---

Preview

Get the code →

Left-aligned with inline actions

---

Preview

Get the code →

Narrow with hidden labels

---

Preview

Get the code →

Narrow with hidden labels

---

Preview

Get the code →