Tailwind CSS List Group

Use the list group component to display a series of items, buttons or links inside a single element

Default

The most basic list group is an unordered list with list items.

  • Profile
  • Settings
  • Newsletter
<ul class="max-w-xs flex flex-col">
 <li class="inline-flex items-center gap-x-2 py-3 px-4 bg-white border border-gray-300 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg">Profile</li>
 <li class="inline-flex items-center gap-x-2 py-3 px-4 bg-white border border-gray-300 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg">Settings</li>
 <li class="inline-flex items-center gap-x-2 py-3 px-4 bg-white border border-gray-300 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg">Newsletter</li>
</ul>

Icons

The default list group with icons.

  • Profile
  • Settings
  • Newsletter 
<ul class="max-w-xs flex flex-col">
  <li class="inline-flex items-center gap-x-3 py-3 px-4 bg-white border border-gray-300 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg">
     <span>
        <svg
           xmlns="http://www.w3.org/2000/svg"
           width="16"
           height="16"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
           class="icon icon-tabler icons-tabler-outline icon-tabler-user-check"
           >
           <path stroke="none" d="M0 0h24v24H0z" fill="none" />
           <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" />
           <path d="M6 21v-2a4 4 0 0 1 4 -4h4" />
           <path d="M15 19l2 2l4 -4" />
        </svg>
     </span>
     <span>Profile</span>
  </li>
  <li class="inline-flex items-center gap-x-3 py-3 px-4 bg-white border border-gray-300 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg">
     <span>
        <svg
           xmlns="http://www.w3.org/2000/svg"
           width="16"
           height="16"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
           class="icon icon-tabler icons-tabler-outline icon-tabler-settings"
           >
           <path stroke="none" d="M0 0h24v24H0z" fill="none" />
           <path
              d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"
              />
           <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
        </svg>
     </span>
     <span>Settings</span>
  </li>
  <li class="inline-flex items-center gap-x-3 py-3 px-4 bg-white border border-gray-300 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg">
     <span>
        <svg
           xmlns="http://www.w3.org/2000/svg"
           width="16"
           height="16"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
           class="icon icon-tabler icons-tabler-outline icon-tabler-bell"
           >
           <path stroke="none" d="M0 0h24v24H0z" fill="none" />
           <path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
           <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
        </svg>
     </span>
     <span>Newsletter</span>
 </li>
                       </ul>

Links

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

Flush

Remove some borders and rounded corners to render list group items edge-to-edge in a parent container

<div class="max-w-xs flex flex-col">
  <a href="#" class="inline-flex items-center gap-x-3 py-3 px-4 bg-white border-b border-gray-300 text-green-600">
     <span>
        <svg
           xmlns="http://www.w3.org/2000/svg"
           width="16"
           height="16"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
           class="icon icon-tabler icons-tabler-outline icon-tabler-user-check"
           >
           <path stroke="none" d="M0 0h24v24H0z" fill="none" />
           <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" />
           <path d="M6 21v-2a4 4 0 0 1 4 -4h4" />
           <path d="M15 19l2 2l4 -4" />
        </svg>
     </span>
     <span>Profile</span>
  </a>
  <a href="#" class="inline-flex items-center gap-x-3 py-3 px-4 bg-white border-b border-gray-300 text-gray-800 hover:text-green-600">
     <span>
        <svg
           xmlns="http://www.w3.org/2000/svg"
           width="16"
           height="16"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
           class="icon icon-tabler icons-tabler-outline icon-tabler-settings"
           >
           <path stroke="none" d="M0 0h24v24H0z" fill="none" />
           <path
              d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"
              />
           <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
        </svg>
     </span>
     <span>Settings</span>
  </a>
  <a href="#" class="inline-flex items-center gap-x-3 py-3 px-4 bg-white text-gray-800 hover:text-green-600">
     <span>
        <svg
           xmlns="http://www.w3.org/2000/svg"
           width="16"
           height="16"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
           class="icon icon-tabler icons-tabler-outline icon-tabler-bell"
           >
           <path stroke="none" d="M0 0h24v24H0z" fill="none" />
           <path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
           <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
        </svg>
     </span>
     <span>Newsletter</span>
  </a>
 </div>

Horizontal

The default horizontal list group.

  • Profile
  • Settings
  • Newsletter 
<ul class="max-w-xs flex flex-col sm:flex-row">
  <li
     class="inline-flex items-center gap-x-3 py-3 px-4 bg-white border border-gray-300 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg sm:-ms-px sm:mt-0 sm:first:rounded-se-none sm:first:rounded-es-lg sm:last:rounded-es-none sm:last:rounded-se-lg"
     >
     <span>
        <svg
           xmlns="http://www.w3.org/2000/svg"
           width="16"
           height="16"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
           class="icon icon-tabler icons-tabler-outline icon-tabler-user-check"
           >
           <path stroke="none" d="M0 0h24v24H0z" fill="none" />
           <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" />
           <path d="M6 21v-2a4 4 0 0 1 4 -4h4" />
           <path d="M15 19l2 2l4 -4" />
        </svg>
     </span>
     <span>Profile</span>
  </li>
  <li
     class="inline-flex items-center gap-x-3 py-3 px-4 bg-white border border-gray-300 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg sm:-ms-px sm:mt-0 sm:first:rounded-se-none sm:last:rounded-es-none"
     >
     <span>
        <svg
           xmlns="http://www.w3.org/2000/svg"
           width="16"
           height="16"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
           class="icon icon-tabler icons-tabler-outline icon-tabler-settings"
           >
           <path stroke="none" d="M0 0h24v24H0z" fill="none" />
           <path
              d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"
              />
           <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
        </svg>
     </span>
     <span>Settings</span>
  </li>
  <li
     class="inline-flex items-center gap-x-3 py-3 px-4 bg-white border border-gray-300 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg sm:-ms-px sm:mt-0 sm:first:rounded-se-none sm:first:rounded-es-lg sm:last:rounded-es-none sm:last:rounded-se-lg"
     >
     <span>
        <svg
           xmlns="http://www.w3.org/2000/svg"
           width="16"
           height="16"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
           class="icon icon-tabler icons-tabler-outline icon-tabler-bell"
           >
           <path stroke="none" d="M0 0h24v24H0z" fill="none" />
           <path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
           <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
        </svg>
     </span>
     <span>Newsletter</span>
  </li>
</ul>

Badges

Add badges to any list group item to show unread counts, activity, and more.

<div class="max-w-xs flex flex-col">
  <a href="#" class="inline-flex items-center justify-between py-3 px-4 bg-white border border-gray-300 rounded-t-lg -mt-px text-gray-800 hover:text-green-600">
     <div class="flex items-center gap-x-3">
        <span>
           <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="icon icon-tabler icons-tabler-outline icon-tabler-user-check"
              >
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" />
              <path d="M6 21v-2a4 4 0 0 1 4 -4h4" />
              <path d="M15 19l2 2l4 -4" />
           </svg>
        </span>
        <span>Profile</span>
     </div>
     <div><span class="inline-block p-2 text-sm align-baseline leading-none rounded-full bg-green-600 text-white font-semibold">New</span></div>
  </a>
  <a href="#" class="inline-flex items-center justify-between py-3 px-4 bg-white border border-gray-300 -mt-px text-gray-800 hover:text-green-600">
     <div class="flex items-center gap-x-3">
        <span>
           <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="icon icon-tabler icons-tabler-outline icon-tabler-settings"
              >
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path
                 d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"
                 />
              <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
           </svg>
        </span>
        <span>Settings</span>
     </div>
     <div><span class="inline-block px-2 py-1.5 text-sm align-baseline leading-none rounded-full bg-green-600 text-white font-semibold">2</span></div>
  </a>
  <a href="#" class="inline-flex items-center justify-between py-3 px-4 bg-white border border-gray-300 rounded-b-lg -mt-px text-gray-800 hover:text-green-600">
     <div class="flex items-center gap-x-3">
        <span>
           <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="icon icon-tabler icons-tabler-outline icon-tabler-bell"
              >
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
              <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
           </svg>
        </span>
        <span>Newsletter</span>
     </div>
     <div>
        <span class="inline-block p-2 text-sm align-baseline leading-none rounded-full bg-green-600 text-white font-semibold">99+</span>
     </div>
  </a>
 </div>