Tailwind List Group - Free Examples & Tutorial

Use responsive listgroup component with helper examples for active link, disabled link, links styling, nav links & more. Free download, open-source license.

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

HTML

        
            
      <ul class="w-96">
        <li
          class="w-full border-b-2 border-neutral-100 border-opacity-100 py-4 dark:border-opacity-50">
          An item
        </li>
        <li
          class="w-full border-b-2 border-neutral-100 border-opacity-100 py-4 dark:border-opacity-50">
          A second item
        </li>
        <li
          class="w-full border-b-2 border-neutral-100 border-opacity-100 py-4 dark:border-opacity-50">
          A third item
        </li>
        <li
          class="w-full border-b-2 border-neutral-100 border-opacity-100 py-4 dark:border-opacity-50">
          A fourth item
        </li>
        <li class="w-full py-4">And a fifth one</li>
      </ul>

Hey there 👋 we want to make TW elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Share via Reddit Share via StumbleUpon

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

HTML

        
            
      <ul class="w-96">
        <li class="w-full rounded-lg bg-primary-100 p-4 text-primary-600">
          An item
        </li>
        <li class="w-full p-4">A second item</li>
        <li class="w-full p-4">A third item</li>
        <li class="w-full p-4">A fourth item</li>
        <li class="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

HTML

        
            
      <ul class="w-96">
        <li
          class="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
          class="w-full border-b-2 border-neutral-100 border-opacity-100 py-4 dark:border-opacity-50">
          A second item
        </li>
        <li
          class="w-full border-b-2 border-neutral-100 border-opacity-100 py-4 dark:border-opacity-50">
          A third item
        </li>
        <li
          class="w-full border-b-2 border-neutral-100 border-opacity-100 py-4 dark:border-opacity-50">
          A fourth item
        </li>
        <li class="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

HTML

        
            
      <div class="w-96">
        <a
          href="#!"
          aria-current="true"
          class="block w-full cursor-pointer rounded-lg bg-primary-100 p-4 text-primary-600">
          The current link item
        </a>
        <a
          href="#!"
          class="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="#!"
          class="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="#!"
          class="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="#!"
          class="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.

HTML

        
            
      <div class="w-96">
        <button
          aria-current="true"
          type="button"
          class="block w-full cursor-pointer rounded-lg bg-primary-100 p-4 text-left text-primary-600">
          The current button
        </button>
        <button
          type="button"
          class="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"
          class="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"
          class="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"
          class="block w-full cursor-default p-4 text-left text-neutral-500 focus:outline-none focus:ring-0">
          A disabled button item
        </button>
      </div>

List group

Tailwind CSS List Group

Basic example

Active items

Disabled items

Links

Buttons

List group

Tailwind CSS List Group

Basic example

Active items

Disabled items

Links

Buttons

Related resources

Tutorials:

Extended Docs:

Design System (Figma):