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 text-surface dark:text-white">
        <li
          class="w-full border-b-2 border-neutral-100 py-4 dark:border-white/10">
          An item
        </li>
        <li
          class="w-full border-b-2 border-neutral-100 py-4 dark:border-white/10">
          A second item
        </li>
        <li
          class="w-full border-b-2 border-neutral-100 py-4 dark:border-white/10">
          A third item
        </li>
        <li
          class="w-full border-b-2 border-neutral-100 py-4 dark:border-white/10">
          A fourth item
        </li>
        <li class="w-full py-4">And a fifth one</li>
      </ul>

Hey there 👋 we're excited about TW elements 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 active item
A second item
A third item
A fourth item
And a fifth one

HTML

        
            
      <ul class="w-96 text-surface dark:text-white">
        <li
          class="w-full rounded-lg bg-primary-100 p-4 text-primary-700 dark:bg-slate-900 dark:text-primary-500">
          An active 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 text-surface dark:text-white">
        <li
          class="w-full cursor-default border-b-2 border-neutral-100 py-4 text-surface/50 dark:border-white/10 dark:text-white/50">
          A disabled item
        </li>
        <li
          class="w-full border-b-2 border-neutral-100 py-4 dark:border-white/10">
          A second item
        </li>
        <li
          class="w-full border-b-2 border-neutral-100 py-4 dark:border-white/10">
          A third item
        </li>
        <li
          class="w-full border-b-2 border-neutral-100 py-4 dark:border-white/10">
          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 text-surface dark:text-white">
        <a
          href="#!"
          aria-current="true"
          class="block w-full cursor-pointer rounded-lg bg-primary-100 p-4 text-primary-700 dark:bg-slate-900 dark:text-primary-500">
          The current link item
        </a>
        <a
          href="#!"
          class="block w-full cursor-pointer rounded-lg p-4 transition duration-500 hover:bg-zinc-50 hover:text-black focus:bg-zinc-50 focus:text-black focus:ring-0 active:bg-zinc-100 active:text-surface dark:hover:bg-neutral-700/60 dark:hover:text-white dark:focus:bg-neutral-700/60 dark:focus:text-white dark:active:bg-surface dark:active:text-white">
          A second link item
        </a>
        <a
          href="#!"
          class="block w-full cursor-pointer rounded-lg p-4 transition duration-500 hover:bg-zinc-50 hover:text-black focus:bg-zinc-50 focus:text-black focus:ring-0 active:bg-zinc-100 active:text-surface dark:hover:bg-neutral-700/60 dark:hover:text-white dark:focus:bg-neutral-700/60 dark:focus:text-white dark:active:bg-surface dark:active:text-white">
          A third link item
        </a>
        <a
          href="#!"
          class="block w-full cursor-pointer rounded-lg p-4 transition duration-500 hover:bg-zinc-50 hover:text-black focus:bg-zinc-50 focus:text-black focus:ring-0 active:bg-zinc-100 active:text-surface dark:hover:bg-neutral-700/60 dark:hover:text-white dark:focus:bg-neutral-700/60 dark:focus:text-white dark:active:bg-surface dark:active:text-white">
          A fourth link item
        </a>
        <a
          href="#!"
          class="pointer-events-none block w-full p-4 text-surface/50 focus:outline-none focus:ring-0 dark:text-white/50">
          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 text-surface dark:text-white">
        <button
          aria-current="true"
          type="button"
          class="block w-full rounded-lg bg-primary-100 p-4 text-start text-primary-700 dark:bg-slate-900 dark:text-primary-500">
          The current button
        </button>
        <button
          type="button"
          class="block w-full rounded-lg p-4 text-start transition duration-500 hover:bg-zinc-50 hover:text-black focus:bg-zinc-50 focus:text-black focus:ring-0 active:bg-zinc-100 active:text-surface dark:hover:bg-neutral-700/60 dark:hover:text-white dark:focus:bg-neutral-700/60 dark:focus:text-white dark:active:bg-surface dark:active:text-white">
          A second button item
        </button>
        <button
          type="button"
          class="block w-full rounded-lg p-4 text-start transition duration-500 hover:bg-zinc-50 hover:text-black focus:bg-zinc-50 focus:text-black focus:ring-0 active:bg-zinc-100 active:text-surface dark:hover:bg-neutral-700/60 dark:hover:text-white dark:focus:bg-neutral-700/60 dark:focus:text-white dark:active:bg-surface dark:active:text-white">
          A third button item
        </button>
        <button
          type="button"
          class="block w-full rounded-lg p-4 text-start transition duration-500 hover:bg-zinc-50 hover:text-black focus:bg-zinc-50 focus:text-black focus:ring-0 active:bg-zinc-100 active:text-surface dark:hover:bg-neutral-700/60 dark:hover:text-white dark:focus:bg-neutral-700/60 dark:focus:text-white dark:active:bg-surface dark:active:text-white">
          A fourth button item
        </button>
        <button
          disabled=""
          type="button"
          class="pointer-events-none block w-full p-4 text-start text-surface/50 focus:outline-none focus:ring-0 dark:text-white/50">
          A disabled button item
        </button>
      </div>

List group

Tailwind CSS List Group

Basic example

Active items

Disabled items

Links

Buttons

Access restricted

To view this section you must have an active PRO account

List group

Tailwind CSS List Group

Basic example

Active items

Disabled items

Links

Buttons

Related resources

Tutorials:

Extended Docs:

Generators and builders:

Design System (Figma):