Tailwind CSS List Styles

Tailwind CSS List Styles crafted by TailGrids - custom, accessible list styles that you can use as a foundation for building your own. They're easy to use out o...

Ordered List with Angled BadgesFree

An eye-catching ordered list with numbered items highlighted by dynamic, angled badges. The unique badge design adds a modern and visually interesting touch to traditional numbered lists.

Ordered List with Circular badgeFree

A numbered list where each item is highlighted with a colorful circular badge containing the item number. Provides visual appeal to your lists, making them easier to read and navigate.

Ordered List with Square BadgeFree

A numbered list where each item is marked with a coloured square badge containing the item number. It enhances readability and adds a subtle visual accent to your ordered lists.

Unordered List with Arrow MarkersFree

A visually distinct unordered list where each item is marked with an arrow bullet point. This style can imply direction, movement, or progression.

Unordered List with Checkmark IconFree

A visually engaging unordered list where each item is marked with a blue checkmark icon. It adds a sense of completion or affirmation.

Unordered List with Dot MarkersFree

A classic unordered list where each item is marked with a colorful dot bullet point. Improve visual interest in standard bulleted lists, making them more engaging.

Unordered List with Green Checkmark IconFree

A visually engaging unordered list where each item is marked with a green checkmark icon. This style adds a sense of completion or affirmation.

Unordered List with Red X IconFree

An attention-grabbing unordered list where each item is marked with a red "x" icon, often used to represent incorrect or incomplete items.

Unordered List with Star MarkersFree

This is a visually engaging unordered list in which each item is marked with a star icon. This style adds a touch of flair and highlights the importance of each item on the list.