Tailwind React List Group - Free Examples & Tutorial

Use responsive listgroup component with helper examples for active link, disabled link, links styling, nav links & more.

Basic example

The list groups are very useful and flexible component for displaying lists of elements in a beautiful manner.

The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow.

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

        
            
      import React from 'react';

      export default function App() {
        return (
            <ul className="w-96">
                <li className="w-full border-b-2 border-neutral-100 border-opacity-100 py-4 dark:border-opacity-50">
                    An item
                </li>
                <li className="w-full border-b-2 border-neutral-100 border-opacity-100 py-4 dark:border-opacity-50">
                    A second item
                </li>
                <li className="w-full border-b-2 border-neutral-100 border-opacity-100 py-4 dark:border-opacity-50">
                    A third item
                </li>
                <li className="w-full border-b-2 border-neutral-100 border-opacity-100 py-4 dark:border-opacity-50">
                    A fourth item
                </li>
                <li className="w-full py-4">And a fifth one</li>
            </ul>  
        );
      }

Hey there 👋 we're excited about TW Elements for React and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Active items

Use code below to indicate the current active selection.

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

        
            
      import React from 'react';

      export default function App() {
        return (
            <ul className="w-96">
                <li className="w-full rounded-lg bg-primary-100 p-4 text-primary-600">
                    An item
                </li>
                <li className="w-full p-4">A second item</li>
                <li className="w-full p-4">A third item</li>
                <li className="w-full p-4">A fourth item</li>
                <li className="w-full p-4">And a fifth one</li>
            </ul> 
        );
      }

Disabled items

The class .text-neutral-* and .cursor-default is used to disable a specific item in the list group.

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

        
            
      import React from 'react';

      export default function App() {
        return (
            <ul className="w-96">
                <li className="w-full cursor-default border-b-2 border-neutral-100 border-opacity-100 py-4 text-neutral-500 dark:border-opacity-50">
                    A disabled item
                </li>
                <li className="w-full border-b-2 border-neutral-100 border-opacity-100 py-4 dark:border-opacity-50">
                    A second item
                </li>
                <li className="w-full border-b-2 border-neutral-100 border-opacity-100 py-4 dark:border-opacity-50">
                    A third item
                </li>
                <li className="w-full border-b-2 border-neutral-100 border-opacity-100 py-4 dark:border-opacity-50">
                    A fourth item
                </li>
                <li className="w-full py-4">And a fifth one</li>
            </ul>  
        );
      }

Links

Use <a> or <button> 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

        
            
      import React from 'react';

      export default function App() {
        return (
            <div className="w-96">
                <a
                    href="#!"
                    aria-current="true"
                    className="block w-full cursor-pointer rounded-lg bg-primary-100 p-4 text-primary-600"
                >
                    The current link item
                </a>
                <a
                    href="#!"
                    className="block w-full cursor-pointer rounded-lg p-4 transition duration-500 hover:bg-neutral-100 hover:text-neutral-500 focus:bg-neutral-100 focus:text-neutral-500 focus:ring-0 dark:hover:bg-neutral-600 dark:hover:text-neutral-200 dark:focus:bg-neutral-600 dark:focus:text-neutral-200"
                >
                    A second link item
                </a>
                <a
                    href="#!"
                    className="block w-full cursor-pointer rounded-lg p-4 transition duration-500 hover:bg-neutral-100 hover:text-neutral-500 focus:bg-neutral-100 focus:text-neutral-500 focus:ring-0 dark:hover:bg-neutral-600 dark:hover:text-neutral-200 dark:focus:bg-neutral-600 dark:focus:text-neutral-200"
                >
                    A third link item
                </a>
                <a
                    href="#!"
                    className="block w-full cursor-pointer rounded-lg p-4 transition duration-500 hover:bg-neutral-100 hover:text-neutral-500 focus:bg-neutral-100 focus:text-neutral-500 focus:ring-0 dark:hover:bg-neutral-600 dark:hover:text-neutral-200 dark:focus:bg-neutral-600 dark:focus:text-neutral-200"
                >
                    A fourth link item
                </a>
                <a
                    href="#!"
                    className="block w-full cursor-default p-4 text-neutral-500 focus:outline-none focus:ring-0"
                >
                    A disabled link item
                </a>
            </div>  
        );
      }

Buttons

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

        
            
      import React from 'react';

      export default function App() {
        return (
            <div className="w-96">
                <button
                    aria-current="true"
                    type="button"
                    className="block w-full cursor-pointer rounded-lg bg-primary-100 p-4 text-left text-primary-600"
                >
                    The current button
                </button>
                <button
                    type="button"
                    className="block w-full cursor-pointer rounded-lg p-4 text-left transition duration-500 hover:bg-neutral-100 hover:text-neutral-500 focus:bg-neutral-100 focus:text-neutral-500 focus:ring-0 dark:hover:bg-neutral-600 dark:hover:text-neutral-200 dark:focus:bg-neutral-600 dark:focus:text-neutral-200"
                >
                    A second button item
                </button>
                <button
                    type="button"
                    className="block w-full cursor-pointer rounded-lg p-4 text-left transition duration-500 hover:bg-neutral-100 hover:text-neutral-500 focus:bg-neutral-100 focus:text-neutral-500 focus:ring-0 dark:hover:bg-neutral-600 dark:hover:text-neutral-200 dark:focus:bg-neutral-600 dark:focus:text-neutral-200"
                >
                    A third button item
                </button>
                <button
                    type="button"
                    className="block w-full cursor-pointer rounded-lg p-4 text-left transition duration-500 hover:bg-neutral-100 hover:text-neutral-500 focus:bg-neutral-100 focus:text-neutral-500 focus:ring-0 dark:hover:bg-neutral-600 dark:hover:text-neutral-200 dark:focus:bg-neutral-600 dark:focus:text-neutral-200"
                >
                    A fourth button item
                </button>
                <button
                    disabled
                    type="button"
                    className="block w-full cursor-default p-4 text-left text-neutral-500 focus:outline-none focus:ring-0"
                >
                    A disabled button item
                </button>
            </div>  
        );
      }

If you are looking for more advanced options, try Bootstrap Images from MDBootstrap.

List group

Tailwind CSS React List Group

Basic example

Active items

Disabled items

Links

Buttons

List group

Tailwind CSS React List Group

Basic example

Active items

Disabled items

Links

Buttons

Related resources