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.

Basic usage

Example

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

Theme:

Icons

The default list group with icons.

Theme:

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.

Theme:

Striped

Zebra-striping list items.

Theme:

Flush

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

Theme:

No gutters

No paddings in left and right.

Theme:

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.

Theme:

Badges

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

Theme:

List group invoice

A simple list group example with a highlighted footer.

Theme:

List group examples

This can be useful for a large number of invoices.

Theme: