1. Components
  2. List Group

Components

Tailwind CSS List Group

Tailwind CSS List groups is a versatile way to display a series of content. Build it with badges, counters, statuses, highlighted footers, icons, buttons and more.

Example

The most basic list group is an unordered list with list items.

  • Profile
  • Settings
  • Newsletter

Icons

The default list group with icons.

  • Newsletter
  • Downloads
  • Team Account

Use <a> to create actionable list group items with hover, disabled, and active states.

Buttons

Use <button> to create actionable list group items with hover, disabled, and active states.

Striped

Zebra-striping list items.

  • Profile
  • Settings
  • Newsletter
  • Downloads
  • Team Account

Flush

Remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).

  • Profile
  • Settings
  • Newsletter

No gutters

No paddings in left and right.

  • Profile
  • Settings
  • Newsletter

Horizontal

The default horizontal list group.

The horizontal list will change to vertical order at small resolutions. Reduce browser size to see it in action.

  • Newsletter
  • Downloads
  • Team Account

Badges

Add badges to any list group item to show unread counts, activity, and more.

  • Profile New
  • Settings 2
  • Newsletter 99+

List group invoice

A simple list group example with a highlighted footer.

  • Payment to Front $264.00
  • Tax fee $52.8
  • Amount paid $316.8

List group examples

This can be useful for a large number of invoices.

  • resume_web_ui_developer.csv
  • coverletter_web_ui_developer.pdf