Tailwind CSS List Group

List items with icons

Add leading icons to help users scan item types more quickly.

Linked items

Use <a> elements for navigational list items with hover, disabled, and active states.

Button items

Use <button> elements for interactive list items that trigger actions in place.

Striped rows

Alternate row backgrounds to make longer lists easier to scan.

Flush list group

Remove outer borders and corner radius so items sit flush inside cards or panels.

Without horizontal padding

Remove left and right padding for a tighter edge-to-edge list layout.

Horizontal layout

Arrange list group items in a row instead of stacking them vertically.

On smaller screens, the layout falls back to a vertical stack.

List items with badges

Add trailing badges to show unread counts, status, or item totals.

Invoice summary

Use a highlighted final row to summarize totals or key invoice details.

Download list

Use this pattern for file lists with truncated names and inline download actions.