DOCUMENTATION

List group

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

Basic example

The most basic list group is an unordered list with list items and the proper Tailwind classes.

The first link item A second link item A third link item A fourth link item A disabled link item


<div class="flex flex-col w-full ">
    <a href="#" class="w-full px-4 py-2 text-white border-t border-b border-gray-400 hover:text-gray-700 rounded-t">The current link item</a>
    <a href="#" class="w-full px-4 py-2 border-b border-l border-r border-gray-400 hover:text-gray-700">A second link item</a>
    <a href="#" class="w-full px-4 py-2 border-b border-l border-r border-gray-400 hover:text-gray-700">A third link item</a>
    <a href="#" class="w-full px-4 py-2 border-b border-l border-r border-gray-400 hover:text-gray-700">A fourth link item</a>
    <a class="w-full px-4 py-2 text-gray-700 border-b border-l border-r border-gray-400 rounded-b"> A disabled link item</a>
</div>

Active items

Add .active to indicate the current active selection.

The current link item A second link item A third link item A fourth link item A disabled link item


<div class="flex flex-col w-full ">
    <a href="#" class="w-full px-4 py-2 text-white bg-blue-500 border-blue-400 rounded-t">The current link item</a>
    <a href="#" class="w-full px-4 py-2 border-b border-l border-r border-gray-400 hover:text-gray-700">A second link item</a>
    <a href="#" class="w-full px-4 py-2 border-b border-l border-r border-gray-400 hover:text-gray-700">A third link item</a>
    <a href="#" class="w-full px-4 py-2 border-b border-l border-r border-gray-400 hover:text-gray-700">A fourth link item</a>
    <a class="w-full px-4 py-2 text-gray-700 border-b border-l border-r border-gray-400 rounded-b"> A disabled link item</a>
</div>

Disabled items

Add 'disabled' to make it appear disabled. Note that some elements with .disabled will also require custom JavaScript to fully disable their click events

A disabled item
A second item
A third item
A fourth item
And a fifth one


<ul class="flex flex-col w-full ">
    <li class="w-full px-4 py-2 text-gray-700 border border-gray-400 rounded-t">A disabled item</li>
    <li class="w-full px-4 py-2 border-b border-l border-r border-gray-400">A second item</li>
    <li class="w-full px-4 py-2 border-b border-l border-r border-gray-400">A third item</li>
    <li class="w-full px-4 py-2 border-b border-l border-r border-gray-400">A fourth item</li>
    <li class="w-full px-4 py-2 border-b border-l border-r border-gray-400 rounded-b">And a fifth one</li>
</ul>

Links and Buttons

Use anchor or button tag to create actionable list group items with hover, disabled, and active states.

The current link item A second link item A third link item A fourth link item A disabled link item


<div class="flex flex-col w-full ">
    <a href="#" class="w-full px-4 py-2 text-white bg-blue-500 border-blue-400 rounded-t">The current link item</a>
    <a href="#" class="w-full px-4 py-2 border-b border-l border-r border-gray-400 hover:text-gray-700">A second link item</a>
    <a href="#" class="w-full px-4 py-2 border-b border-l border-r border-gray-400 hover:text-gray-700">A third link item</a>
    <a href="#" class="w-full px-4 py-2 border-b border-l border-r border-gray-400 hover:text-gray-700">A fourth link item</a>
    <a class="w-full px-4 py-2 text-gray-700 border-b border-l border-r border-gray-400 rounded-b"> A disabled link item</a>
</div>

Flush

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

An item
A second item
A third item
A fourth item
And a fifth one


<ul class="flex flex-col w-full ">
    <li class="w-full px-4 py-2 border-b border-gray-400">An item</li>
    <li class="w-full px-4 py-2 border-b border-gray-400">A second item</li>
    <li class="w-full px-4 py-2 border-b border-gray-400">A third item</li>
    <li class="w-full px-4 py-2 border-b border-gray-400">A fourth item</li>
    <li class="w-full px-4 py-2 border-b border-gray-400">And a fifth one</li>
</ul>

Numberd

Numbers are generated via Tailwind CSS (as opposed to a ordered-list tag default browser styling) for better placement inside list group items and to allow for better customization.

1.

Subheading

Cras justo odio

14
2.

Subheading

Cras justo odio

14
3.

Subheading

Cras justo odio

14


<ol class="flex flex-col w-full">
    <li class="flex justify-between w-full px-4 py-2 border border-gray-400">
        <div class="mr-auto">
            <div class="flex">
                <div class="pr-2">1.</div>
                <div class="font-bold">Subheading</div>
            </div>
            <span class="pl-5">Cras justo odio</span>
        </div>
        <div>
            <span class="inline-block whitespace-nowrap px-2 py-0.5 text-xs text-center font-bold leading-none text-white bg-blue-500 rounded-full">14</span>
        </div>
    </li>
    <li class="flex justify-between w-full px-4 py-2 border-b border-l border-r border-gray-400">
        <div class="mr-auto">
            <div class="flex">
                <div class="pr-2">2.</div>
                <div class="font-bold">Subheading</div>
            </div>
            <span class="pl-5">Cras justo odio</span>
        </div>
        <div>
            <span class="inline-block whitespace-nowrap px-2 py-0.5 text-xs text-center font-bold leading-none text-white bg-blue-500 rounded-full">14</span>
        </div>
    </li>
    <li class="flex justify-between w-full px-4 py-2 border-b border-l border-r border-gray-400">
        <div class="mr-auto">
            <div class="flex">
                <div class="pr-2">3.</div>
                <div class="font-bold">Subheading</div>
            </div>
            <span class="pl-5">Cras justo odio</span>
        </div>
        <div>
            <span class="inline-block whitespace-nowrap px-2 py-0.5 text-xs text-center font-bold leading-none text-white bg-blue-500 rounded-full">14</span>
        </div>
    </li>
</ol>

Contextual classes

Use contextual classes to style list items with a stateful background and color.

A simple default list group item A simple primary list group item A simple secondary list group item A simple success list group item A simple danger list group item A simple warning list group item A simple info list group item A simple light list group item A simple dark list group item


<div class="flex flex-col w-full ">
    <a href="#" class="w-full px-4 py-2 text-gray-700 border border-gray-400 rounded-t hover:text-gray-700">A simple default list group item</a>
    <a href="#" class="w-full px-4 py-2 text-blue-700 bg-blue-100 border border-gray-400 hover:bg-white">A simple primary list group item</a>
    <a href="#" class="w-full px-4 py-2 text-gray-700 bg-gray-200 border border-gray-400 hover:bg-white">A simple secondary list group item</a>
    <a href="#" class="w-full px-4 py-2 text-green-700 bg-green-100 border border-gray-400 hover:bg-white">A simple success list group item</a>
    <a href="#" class="w-full px-4 py-2 text-red-700 bg-red-100 border border-gray-400 hover:bg-white">A simple danger list group item</a>
    <a href="#" class="w-full px-4 py-2 text-orange-700 bg-orange-100 border border-gray-400 hover:bg-white">A simple warning list group item</a>
    <a href="#" class="w-full px-4 py-2 border border-gray-400 bg-cyan-100 hover:b-white text-cyan-700 hover:bg-white">A simple info list group item</a>
    <a href="#" class="w-full px-4 py-2 text-gray-600 bg-gray-100 border border-gray-400 hover:bg-white">A simple light list group item</a>
    <a href="#" class="w-full px-4 py-2 text-black bg-gray-300 border border-gray-400 rounded-b hover:bg-white">A simple dark list group item</a>
</div>

With badges

Add badges to any list group item to show unread counts, activity, and more with the help of some utilities.

A list item
14
A second list item
2
A third list item
1


<ul class="flex flex-col w-full ">
    <li class="flex justify-between w-full px-4 py-2 border border-gray-400 rounded-t">A list item
        <div><span class="inline-block whitespace-nowrap px-2 py-0.5 text-xs text-center font-bold leading-none text-white bg-blue-500 rounded-full">14</span></div>
    </li>
    <li class="flex justify-between w-full px-4 py-2 border-b border-l border-r border-gray-400">A second list item
        <div><span class="inline-block whitespace-nowrap px-2 py-0.5 text-xs text-center font-bold leading-none text-white bg-blue-500 rounded-full">2</span></div>
    </li>
    <li class="flex justify-between w-full px-4 py-2 border-b border-l border-r border-gray-400 rounded-b">A third list item
        <div><span class="inline-block whitespace-nowrap px-2 py-0.5 text-xs text-center font-bold leading-none text-white bg-blue-500 rounded-full">1</span></div>
    </li>
</ul>

Custom content

Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilities.

List group item heading

3 days ago

Some placeholder content in a paragraph.

And some small print.

List group item heading

3 days ago

Some placeholder content in a paragraph.

And some muted small print.

List group item heading

3 days ago

Some placeholder content in a paragraph.

And some muted small print.


<div class="flex flex-col w-full mt-4">
    <a href="#" class="w-full px-4 py-2 bg-blue-500 border-blue-500 rounded-t">
        <div class="flex justify-between w-full">
            <h5 class="mb-1 text-xl font-medium">List group item heading</h5>
            <small class="text-white">3 days ago</small>
        </div>
        <p class="mb-1 text-white">Some placeholder content in a paragraph.</p>
        <small class="text-white">And some small print.</small>
    </a>
    <a href="#" class="w-full px-4 py-2 border-b border-l border-r border-gray-400">
        <div class="flex justify-between w-full">
            <h5 class="mb-1 text-xl font-medium">List group item heading</h5>
            <small class="text-muted">3 days ago</small>
        </div>
        <p class="mb-1">Some placeholder content in a paragraph.</p>
        <small class="text-muted">And some muted small print.</small>
    </a>
    <a href="#" class="w-full px-4 py-2 border-b border-l border-r border-gray-400 rounded-b">
        <div class="flex justify-between w-full">
            <h5 class="mb-1 text-xl font-medium">List group item heading</h5>
            <small class="text-muted">3 days ago</small>
        </div>
        <p class="mb-1">Some placeholder content in a paragraph.</p>
        <small class="text-muted">And some muted small print.</small>
    </a>
</div>

Checkboxes and radios

Place Tailwind’s checkboxes and radios within list group items and customize as needed.

First checkbox Second checkbox Third checkbox Fourth checkbox Fifth checkbox


<div class="flex flex-col w-full mt-4">
    <label class="w-full px-4 py-2 border border-gray-400 rounded-t">
        <input class="w-4 h-4 mr-1" type="checkbox">First checkbox
    </label>
    <label class="w-full px-4 py-2 border-b border-l border-r border-gray-400">
        <input class="w-4 h-4 mr-1" type="checkbox">Second checkbox
    </label>
    <label class="w-full px-4 py-2 border-b border-l border-r border-gray-400">
        <input class="w-4 h-4 mr-1" type="checkbox">Third checkbox
    </label>
    <label class="w-full px-4 py-2 border-b border-l border-r border-gray-400">
        <input class="w-4 h-4 mr-1" type="checkbox">Fourth checkbox
    </label>
    <label class="w-full px-4 py-2 border-b border-l border-r border-gray-400 rounded-b">
        <input class="w-4 h-4 mr-1" type="checkbox">Fifth checkbox
    </label>
</div>

Previous Next

Updated on February 28, 2022

Was this page helpful?