Modernize TailwindCSS HTML Admin Template

List

Home
List

Basic List

Basic List - View Code

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

The most basic list group is an unordered list.

Profile
Settings
Newsletter

List with Icon

List with Icon - View Code

       
<ul class="max-w-xs flex flex-col">
   <li class="inline-flex items-center gap-x-3.5 py-3 px-4 text-sm font-medium bg-white border border-gray-200 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:bg-transparent dark:border-gray-700 dark:text-white">
      <i class="ti ti-bell text-lg leading-tight font-medium"></i>
      Newsletter
   </li>
   <li class="inline-flex items-center gap-x-3.5 py-3 px-4 text-sm font-medium bg-white border border-gray-200 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:bg-transparent dark:border-gray-700 dark:text-white">
      <i class="ti ti-cloud-download text-lg leading-tight font-medium"></i>
      Downloads
   </li>
   <li class="inline-flex items-center gap-x-3.5 py-3 px-4 text-sm font-medium bg-white border border-gray-200 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:bg-transparent dark:border-gray-700 dark:text-white">
      <i class="ti ti-users text-lg leading-tight font-medium"></i>
      Team Account
   </li>
</ul>

The default list group with icons.

Newsletter
Downloads
Team Account

Links - View Code

       
<div class="max-w-xs flex flex-col">
   <a class="inline-flex items-center gap-x-3.5 py-3 px-4 text-sm font-medium border border-gray-200 text-primary -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg focus:z-10 focus:outline-none focus:ring-2 focus:ring-primary dark:border-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
   <i class="ti ti-bell text-lg leading-tight font-medium"></i>
   Active
   </a>
   <a class="inline-flex items-center gap-x-3.5 py-3 px-4 text-sm font-medium bg-white border border-gray-200 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg hover:text-primary focus:z-10 focus:outline-none focus:ring-2 focus:ring-primary dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:text-primary dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
   <i class="ti ti-cloud-download text-lg leading-tight font-medium"></i>
   Link
   </a>
   <a class="inline-flex items-center gap-x-3.5 py-3 px-4 text-sm font-medium border text-gray-400 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg cursor-not-allowed focus:z-10 focus:outline-none focus:ring-2 focus:ring-primary dark:border-gray-700 dark:text-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
   <i class="ti ti-users text-lg leading-tight font-medium"></i>
   Disabled
   </a>
</div>

Use the '<a>' to create actionable list group.

Active Link Disabled

Flush

Flush - View Code

       
<ul class="max-w-xs flex flex-col divide-y divide-gray-200 dark:divide-gray-700">
   <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-medium text-gray-800 dark:text-white">
      Profile
   </li>
   <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-medium text-gray-800 dark:text-white">
      Settings
   </li>
   <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-medium text-gray-800 dark:text-white">
      Newsletter
   </li>
</ul>

Remove some borders and rounded corners to render list group items edge-to-edge.

Profile
Settings
Newsletter

Badges

Badges - View Code

       
<ul class="max-w-xs flex flex-col">
   <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-medium bg-white border border-gray-200 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:bg-transparent dark:border-gray-700 dark:text-white">
      <div class="flex justify-between w-full">
         Profile
         <span class="inline-flex items-center py-1 px-2 rounded-full text-xs font-medium bg-primary text-white">New</span>
      </div>
   </li>
   <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-medium bg-white border border-gray-200 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:bg-transparent dark:border-gray-700 dark:text-white">
      <div class="flex justify-between w-full">
         Settings
         <span class="inline-flex items-center py-1 px-2 rounded-full text-xs font-medium bg-primary text-white">2</span>
      </div>
   </li>
   <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-medium bg-white border border-gray-200 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:bg-transparent dark:border-gray-700 dark:text-white">
      <div class="flex justify-between w-full">
         Newsletter
         <span class="inline-flex items-center py-1 px-2 rounded-full text-xs font-medium bg-primary text-white">99+</span>
      </div>
   </li>
</ul>

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

Profile New
Settings 2
Newsletter 99+

List group invoice

List group invoice - View Code

       
<!-- List Group -->
<ul class="mt-3 flex flex-col">
   <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm border text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:border-gray-700 dark:text-gray-200">
      <div class="flex items-center justify-between w-full">
         <span>Payment to Front</span>
         <span>$264.00</span>
      </div>
   </li>
   <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm border text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:border-gray-700 dark:text-gray-200">
      <div class="flex items-center justify-between w-full">
         <span>Tax fee</span>
         <span>$52.8</span>
      </div>
   </li>
   <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-semibold bg-gray-50 border text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:bg-slate-800 dark:border-gray-700 dark:text-gray-200">
      <div class="flex items-center justify-between w-full">
         <span>Amount paid</span>
         <span>$316.8</span>
      </div>
   </li>
</ul>
<!-- End List Group -->

A simple list group example with a highlighted footer.

Payment to Front $264.00
Tax fee $52.8
Amount paid $316.8

List marker

List marker - View Code

   
<ul role="list" class="marker:text-primary list-disc ps-5 space-y-2 text-sm text-gray-600 dark:text-gray-400">
   <li>
      FAQ
   </li>
   <li>
      License
   </li>
   <li>
      Terms & Conditions
   </li>
</ul>

Style the counters or bullets in lists using the 'marker' modifier:

FAQ
License
Terms & Conditions

Checked style

Checked style - View Code

   
<div class="flex flex-wrap  justify-between ">
   <ul class="space-y-3 text-sm">
      <li class="flex space-x-3">
         <i class="ti ti-check text-base leading-tight font-medium text-primary"></i>
         <span class="text-gray-800 dark:text-gray-400">
         FAQ
         </span>
      </li>
      <li class="flex space-x-3">
         <i class="ti ti-check text-base leading-tight font-medium text-primary"></i>
         <span class="text-gray-800 dark:text-gray-400">
         License
         </span>
      </li>
      <li class="flex space-x-3">
         <i class="ti ti-check text-base leading-tight font-medium text-primary"></i>
         <span class="text-gray-800 dark:text-gray-400">
         Terms & Conditions
         </span>
      </li>
   </ul>
   <ul class="space-y-3 text-sm">
      <li class="flex space-x-3">
         <span class="size-5 flex justify-center items-center rounded-full bg-lightprimary text-primary dark:bg-darkprimary dark:text-primary">
         <i class="ti ti-check text-base leading-tight font-medium"></i>
         </span>
         <span class="text-gray-800 dark:text-gray-400">
         FAQ
         </span>
      </li>
      <li class="flex space-x-3">
         <span class="size-5 flex justify-center items-center rounded-full bg-lightprimary text-primary dark:bg-darkprimary dark:text-primary">
         <i class="ti ti-check text-base leading-tight font-medium"></i>
         </span>
         <span class="text-gray-800 dark:text-gray-400">
         License
         </span>
      </li>
      <li class="flex space-x-3">
         <span class="size-5 flex justify-center items-center rounded-full bg-lightprimary text-primary dark:bg-darkprimary dark:text-primary">
         <i class="ti ti-check text-base leading-tight font-medium"></i>
         </span>
         <span class="text-gray-800 dark:text-gray-400">
         Terms & Conditions
         </span>
      </li>
   </ul>
   <ul class="space-y-3 text-sm">
      <li class="flex space-x-3">
         <span class="size-5 flex justify-center items-center rounded-full bg-primary text-white dark:bg-primary">
         <i class="ti ti-check text-base leading-tight font-medium"></i>
         </span>
         <span class="text-gray-800 dark:text-gray-400">
         FAQ
         </span>
      </li>
      <li class="flex space-x-3">
         <span class="size-5 flex justify-center items-center rounded-full bg-primary text-white dark:bg-primary">
         <i class="ti ti-check text-base leading-tight font-medium"></i>
         </span>
         <span class="text-gray-800 dark:text-gray-400">
         License
         </span>
      </li>
      <li class="flex space-x-3">
         <span class="size-5 flex justify-center items-center rounded-full bg-primary text-white dark:bg-primary">
         <i class="ti ti-check text-base leading-tight font-medium"></i>
         </span>
         <span class="text-gray-800 dark:text-gray-400">
         Terms & Conditions
         </span>
      </li>
   </ul>
</div>

Replacing the default list style check style icons.

FAQ
License
Terms & Conditions

FAQ
License
Terms & Conditions

FAQ
License
Terms & Conditions

Horizontal

Horizontal - View Code

   
<ul class="flex flex-col sm:flex-row">
   <li class="inline-flex items-center gap-x-2.5 py-3 px-4 text-sm font-medium bg-white border border-gray-200 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 dark:bg-transparent dark:border-gray-700 dark:text-white">
      <i class="ti ti-bell text-lg leading-tight font-medium"></i>
      Newsletter
   </li>
   <li class="inline-flex items-center gap-x-2.5 py-3 px-4 text-sm font-medium bg-white border border-gray-200 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 dark:bg-transparent dark:border-gray-700 dark:text-white">
      <i class="ti ti-cloud-download text-lg leading-tight font-medium"></i>
      Downloads
   </li>
   <li class="inline-flex items-center gap-x-2.5 py-3 px-4 text-sm font-medium bg-white border border-gray-200 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 dark:bg-transparent dark:border-gray-700 dark:text-white">
      <i class="ti ti-users text-lg leading-tight font-medium"></i>
      Team Account
   </li>
</ul>

The default horizontal list group.

Newsletter
Downloads
Team Account

List group examples

List group examples - View Code

   
<!-- List Group -->
<ul class="flex flex-col justify-end text-start -space-y-px">
   <li class="flex items-center gap-x-2 p-3 text-sm bg-white border text-gray-800 first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:bg-transparent dark:border-gray-700 dark:text-gray-200">
      <div class="w-full flex justify-between truncate">
         <span class="me-3 flex-1 w-0 truncate">
         resume_web_ui_developer.csv
         </span>
         <button type="button" class="flex items-center gap-x-2 text-gray-500 hover:text-blue-500 whitespace-nowrap dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
         <i class="ti ti-download text-lg leading-tight font-medium"></i>
         Download
         </button>
      </div>
   </li>
   <li class="flex items-center gap-x-2 p-3 text-sm bg-white border text-gray-800 first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:bg-transparent dark:border-gray-700 dark:text-gray-200">
      <div class="w-full flex justify-between truncate">
         <span class="me-3 flex-1 w-0 truncate">
         coverletter_web_ui_developer.pdf
         </span>
         <button type="button" class="flex items-center gap-x-2 text-gray-500 hover:text-blue-500 whitespace-nowrap dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
         <i class="ti ti-download text-lg leading-tight font-medium"></i>
         Download
         </button>
      </div>
   </li>
</ul>
<!-- End List Group -->

This can be useful for a large number of invoices.

resume_web_ui_developer.csv
coverletter_web_ui_developer.pdf

List checked color variations

List checked color variations - View Code

   
<div class="flex justify-between">
   <ul class="space-y-3 text-sm">
      <li class="flex space-x-3">
         <i class="ti ti-check text-base leading-tight text-gray-800 dark:text-white font-medium"></i>
         <span class="text-gray-600 dark:text-white">
         Dark
         </span>
      </li>
      <li class="flex space-x-3">
         <i class="ti ti-check text-base text-gray-500 leading-tight font-medium"></i>
         <span class="text-gray-600 dark:text-white">
         Gray
         </span>
      </li>
      <li class="flex space-x-3">
         <i class="ti ti-check text-base leading-tight text-success font-medium"></i>
         <span class="text-gray-600 dark:text-white">
         Green
         </span>
      </li>
      <li class="flex space-x-3">
         <i class="ti ti-check text-base leading-tight text-primary font-medium"></i>
         <span class="text-gray-600 dark:text-white">
         Blue
         </span>
      </li>
      <li class="flex space-x-3">
         <i class="ti ti-check text-base leading-tight text-error font-medium"></i>
         <span class="text-gray-600 dark:text-white">
         Red
         </span>
      </li>
      <li class="flex space-x-3">
         <i class="ti ti-check text-base leading-tight text-warning font-medium"></i>
         <span class="text-gray-600 dark:text-white">
         Yellow
         </span>
      </li>
      <li class="flex space-x-3">
         <i class="ti ti-check text-base leading-tight text-white font-medium"></i>
         <span class="text-gray-600 dark:text-white">
         Light
         </span>
      </li>
   </ul>
   <ul class="space-y-3 text-sm">
      <li class="flex space-x-3">
         <span class="size-5 flex justify-center items-center rounded-full bg-gray-50 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
         <i class="ti ti-check text-base leading-tight font-medium relative right-[1px]"></i>
         </span>
         <span class="text-gray-600 dark:text-white">
         Dark
         </span>
      </li>
      <li class="flex space-x-3">
         <span class="size-5 flex justify-center items-center rounded-full bg-gray-50 text-gray-500 dark:bg-gray-700 dark:text-gray-400">
         <i class="ti ti-check text-base leading-tight font-medium relative right-[1px]"></i>
         </span>
         <span class="text-gray-600 dark:text-white">
         Gray
         </span>
      </li>
      <li class="flex space-x-3">
         <span class="size-5 flex justify-center items-center rounded-full bg-lightsuccess text-success dark:bg-darksuccess dark:text-success">
         <i class="ti ti-check text-base leading-tight font-medium relative right-[1px]"></i>
         </span>
         <span class="text-gray-600 dark:text-white">
         Green
         </span>
      </li>
      <li class="flex space-x-3">
         <span class="size-5 flex justify-center items-center rounded-full bg-lightprimary text-primary dark:bg-darkprimary dark:text-primary">
         <i class="ti ti-check text-base leading-tight font-medium relative right-[1px]"></i>
         </span>
         <span class="text-gray-600 dark:text-white">
         Blue
         </span>
      </li>
      <li class="flex space-x-3">
         <span class="size-5 flex justify-center items-center rounded-full bg-lighterror text-error dark:bg-darkerror dark:text-error">
         <i class="ti ti-check text-base leading-tight font-medium relative right-[1px]"></i>
         </span>
         <span class="text-gray-600 dark:text-white">
         Red
         </span>
      </li>
      <li class="flex space-x-3">
         <span class="size-5 flex justify-center items-center rounded-full bg-lightwarning text-warning dark:bg-darkwarning dark:text-warning">
         <i class="ti ti-check text-base leading-tight font-medium relative right-[1px]"></i>
         </span>
         <span class="text-gray-600 dark:text-white">
         Yellow
         </span>
      </li>
      <li class="flex space-x-3">
         <span class="size-5 flex justify-center items-center rounded-full bg-white/10 text-white">
         <i class="ti ti-check text-base leading-tight font-medium relative right-[1px]"></i>
         </span>
         <span class="text-gray-600 dark:text-white">
         Light
         </span>
      </li>
   </ul>
   <ul class="space-y-3 text-sm">
      <li class="flex space-x-3">
         <span class="size-5 flex justify-center items-center rounded-full bg-gray-800 text-gray-200 dark:bg-gray-200 dark:text-gray-800">
         <i class="ti ti-check text-base leading-tight font-medium"></i>
         </span>
         <span class="text-gray-600 dark:text-white">
         Dark
         </span>
      </li>
      <li class="flex space-x-3">
         <span class="size-5 flex justify-center items-center rounded-full bg-gray-500 text-white">
         <i class="ti ti-check text-base leading-tight font-medium"></i>
         </span>
         <span class="text-gray-600 dark:text-white">
         Gray
         </span>
      </li>
      <li class="flex space-x-3">
         <span class="size-5 flex justify-center items-center rounded-full bg-success text-white">
         <i class="ti ti-check text-base leading-tight font-medium"></i>
         </span>
         <span class="text-gray-600 dark:text-white">
         Green
         </span>
      </li>
      <li class="flex space-x-3">
         <span class="size-5 flex justify-center items-center rounded-full bg-primary text-white dark:bg-primary">
         <i class="ti ti-check text-base leading-tight font-medium"></i>
         </span>
         <span class="text-gray-600 dark:text-white">
         Blue
         </span>
      </li>
      <li class="flex space-x-3">
         <span class="size-5 flex justify-center items-center rounded-full bg-error text-white">
         <i class="ti ti-check text-base leading-tight font-medium"></i>
         </span>
         <span class="text-gray-600 dark:text-white">
         Red
         </span>
      </li>
      <li class="flex space-x-3">
         <span class="size-5 flex justify-center items-center rounded-full bg-warning text-white">
         <i class="ti ti-check text-base leading-tight font-medium"></i>
         </span>
         <span class="text-gray-600 dark:text-white">
         Yellow
         </span>
      </li>
      <li class="flex space-x-3">
         <span class="size-5 flex justify-center items-center rounded-full bg-white text-gray-800">
         <i class="ti ti-check text-base leading-tight font-medium"></i>
         </span>
         <span class="text-gray-600 dark:text-white">
         Light
         </span>
      </li>
   </ul>
</div>

Predefined list checked color styles.

Dark
Gray
Green
Blue
Red
Yellow
Light

Dark
Gray
Green
Blue
Red
Yellow
Light

Dark
Gray
Green
Blue
Red
Yellow
Light

Chat Application

User Profile App

Contact Application

Email App

eCommerce App

Calendar App

Account Setting App

Notes Application

Quick Links

Notifications

Launch Admin

Meeting Today

New Payment received

Pay Bills

Go for Event

User Profile

Mathew Anderson

My Profile

My Inbox

My Tasks

Unlimited Access

Chat Application

User Profile App

Contact Application

Email App

eCommerce App

Calendar App

Account Setting App

Notes Application

Quick Links

Notifications

Launch Admin

Meeting Today

New Payment received

Pay Bills

Go for Event

User Profile

Mathew Anderson

My Profile

My Inbox

My Tasks

Unlimited Access

List

Basic List

Basic List - View Code

List with Icon

List with Icon - View Code

Links

Links - View Code

Flush

Flush - View Code

Badges

Badges - View Code

List group invoice

List group invoice - View Code

List marker

List marker - View Code

Checked style

Checked style - View Code

Horizontal

Horizontal - View Code

List group examples

List group examples - View Code

List checked color variations

List checked color variations - View Code

Chat Application

User Profile App

Contact Application

Email App

eCommerce App

Calendar App

Account Setting App

Notes Application

Quick Links

Quick Page Links

Shopping Cart

Supreme toys cooker

$250

Supreme toys cooker

$250

Unlimited
Access

Unlimited
Access