Components

Tailwind CSS List Group

The list group component can be utilized to present a collection of items, buttons, or links together.

image

In tailwind css list group comes in handy while navigating menus, sidebars, options or list.

Default List Group

This list group in tailwind css is an unordered list group with list items.

  • Home
  • Profile
  • Messages
  • Settings 
<ul class="w-60 flex flex-col">
      <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-semibold bg-white border border-gray-300 hover:text-indigo-600 transition-all duration-300 text-gray-900 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg "> Home </li>
      <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-semibold bg-white border border-gray-300 hover:text-indigo-600 transition-all duration-300 text-gray-900 -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 text-sm font-semibold bg-white border border-gray-300 hover:text-indigo-600 transition-all duration-300 text-gray-900 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg "> Messages </li>
      <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-semibold bg-white border border-gray-300 hover:text-indigo-600 transition-all duration-300 text-gray-900 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg "> Settings </li>
      </ul>

List Group with icons

In this type of tailwind list group, menu items can be shown with an svg file (icon) with text.

  • Home
  • Profile
  • Messages
  • Settings 
 <ul class="w-60 flex flex-col">
      <li class="inline-flex items-center gap-x-3.5 py-3 px-4 text-sm font-semibold bg-white border border-gray-300 hover:text-indigo-600 transition-all duration-300  text-gray-900 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg ">
      <svg class="flex-none fill-gray-900" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M2.56826 12.688L1.77756 12.8096L2.56826 12.688ZM3.21817 16.9124L2.42747 17.034L3.21817 16.9124ZM20.7836 16.9124L19.9929 16.7907L20.7836 16.9124ZM21.4335 12.688L20.6428 12.5663L21.4335 12.688ZM18.944 6.86024L18.4853 7.51562L18.944 6.86024ZM15.4417 4.40856L15.9004 3.75318V3.75318L15.4417 4.40856ZM8.56011 4.40856L8.10134 3.75318L8.56011 4.40856ZM5.05772 6.86024L4.59895 6.20485L5.05772 6.86024ZM19.3805 21.2769L18.8596 20.6697V20.6697L19.3805 21.2769ZM4.62125 21.2769L5.14215 20.6697H5.14215L4.62125 21.2769ZM2.49086 9.20932L3.22654 9.52359L2.49086 9.20932ZM10.5009 17.2C10.0591 17.2 9.70088 17.5582 9.70088 18C9.70088 18.4418 10.0591 18.8 10.5009 18.8V17.2ZM13.5009 18.8C13.9427 18.8 14.3009 18.4418 14.3009 18C14.3009 17.5582 13.9427 17.2 13.5009 17.2V18.8ZM1.77756 12.8096L2.42747 17.034L4.00886 16.7907L3.35896 12.5663L1.77756 12.8096ZM9.1484 22.8H14.8534V21.2H9.1484V22.8ZM21.5743 17.034L22.2242 12.8096L20.6428 12.5663L19.9929 16.7907L21.5743 17.034ZM19.4028 6.20485L15.9004 3.75318L14.9829 5.06395L18.4853 7.51562L19.4028 6.20485ZM8.10134 3.75318L4.59895 6.20485L5.51649 7.51562L9.01888 5.06395L8.10134 3.75318ZM15.9004 3.75318C15.0835 3.18133 14.4175 2.7137 13.835 2.3962C13.2347 2.06903 12.6557 1.86199 12.0009 1.86199V3.46199C12.2917 3.46199 12.6014 3.54604 13.0692 3.80106C13.5549 4.06575 14.1364 4.47141 14.9829 5.06395L15.9004 3.75318ZM9.01888 5.06395C9.86536 4.47141 10.4469 4.06575 10.9325 3.80106C11.4004 3.54604 11.7101 3.46199 12.0009 3.46199V1.86199C11.346 1.86199 10.767 2.06903 10.1668 2.3962C9.58427 2.7137 8.91826 3.18133 8.10134 3.75318L9.01888 5.06395ZM22.2242 12.8096C22.3597 11.929 22.4715 11.2087 22.5009 10.6107C22.5313 9.9942 22.4793 9.43988 22.2466 8.89506L20.7752 9.52359C20.879 9.76665 20.9264 10.0547 20.9029 10.5321C20.8785 11.028 20.7833 11.6531 20.6428 12.5663L22.2242 12.8096ZM18.4853 7.51562C19.2422 8.04549 19.7596 8.40888 20.1348 8.73413C20.496 9.04717 20.6714 9.28053 20.7752 9.52359L22.2466 8.89506C22.0139 8.35024 21.6493 7.92945 21.1828 7.52513C20.7305 7.133 20.1327 6.71579 19.4028 6.20485L18.4853 7.51562ZM14.8534 22.8C16.0608 22.8 17.0409 22.8015 17.8217 22.7034C18.6247 22.6025 19.3158 22.3865 19.9014 21.8841L18.8596 20.6697C18.6024 20.8904 18.258 21.036 17.6222 21.1159C16.9642 21.1985 16.1022 21.2 14.8534 21.2V22.8ZM19.9929 16.7907C19.803 18.025 19.6705 18.8768 19.4887 19.5146C19.3131 20.1308 19.1168 20.4491 18.8596 20.6697L19.9014 21.8841C20.4871 21.3816 20.8056 20.7315 21.0274 19.9531C21.2431 19.1963 21.3907 18.2274 21.5743 17.034L19.9929 16.7907ZM2.42747 17.034C2.61106 18.2274 2.75864 19.1963 2.97433 19.9531C3.19617 20.7315 3.51468 21.3816 4.10034 21.8841L5.14215 20.6697C4.88495 20.4491 4.68867 20.1308 4.51305 19.5146C4.33129 18.8768 4.19875 18.025 4.00886 16.7907L2.42747 17.034ZM9.1484 21.2C7.89959 21.2 7.03756 21.1985 6.37955 21.1159C5.74381 21.036 5.39935 20.8904 5.14215 20.6697L4.10034 21.8841C4.686 22.3865 5.37702 22.6025 6.18009 22.7034C6.96089 22.8015 7.941 22.8 9.1484 22.8V21.2ZM3.35896 12.5663C3.21846 11.6531 3.1233 11.028 3.09889 10.5321C3.07539 10.0547 3.12271 9.76665 3.22654 9.52359L1.75517 8.89506C1.52244 9.43988 1.47047 9.9942 1.50082 10.6107C1.53026 11.2087 1.64208 11.929 1.77756 12.8096L3.35896 12.5663ZM4.59895 6.20485C3.86903 6.71579 3.27129 7.133 2.81892 7.52513C2.35248 7.92945 1.9879 8.35024 1.75517 8.89506L3.22654 9.52359C3.33037 9.28053 3.50579 9.04717 3.86693 8.73413C4.24213 8.40888 4.75953 8.04549 5.51649 7.51562L4.59895 6.20485ZM10.5009 18.8H13.5009V17.2L10.5009 17.2V18.8Z" fill="currentColor" stroke-width="3"></path>
      </svg> Home
      </li>
      <li class="inline-flex items-center gap-x-3.5 py-3 px-4 text-sm font-semibold bg-white border border-gray-300 hover:text-indigo-600 transition-all duration-300  text-gray-900 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg ">
      <svg class="flex-none fill-gray-900" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12.1601 11.4032L12.0846 12.1996C12.1181 12.2028 12.1519 12.2038 12.1855 12.2028L12.1601 11.4032ZM11.8301 11.4032L11.8046 12.2028C11.836 12.2038 11.8674 12.2029 11.8987 12.2002L11.8301 11.4032ZM16.4401 7.20632L17.2401 7.20983V7.20632H16.4401ZM12.2355 10.6067C12.0831 10.5923 11.9147 10.5929 11.7614 10.6061L11.8987 12.2002C11.9654 12.1945 12.037 12.1951 12.0846 12.1996L12.2355 10.6067ZM11.8555 10.6036C9.86902 10.5403 8.36006 9.01086 8.36006 7.20632H6.76006C6.76006 9.94914 9.0311 12.1144 11.8046 12.2028L11.8555 10.6036ZM8.36006 7.20632C8.36006 5.36615 9.94178 3.8 12.0001 3.8V2.2C9.13833 2.2 6.76006 4.40437 6.76006 7.20632H8.36006ZM12.0001 3.8C14.0495 3.8 15.6401 5.3673 15.6401 7.20632H17.2401C17.2401 4.40323 14.8506 2.2 12.0001 2.2V3.8ZM15.6401 7.2028C15.6321 9.01079 14.1203 10.5403 12.1346 10.6036L12.1855 12.2028C14.9598 12.1144 17.228 9.94921 17.2401 7.20983L15.6401 7.2028ZM8.5 15.1684H15.5V13.5684H8.5V15.1684ZM15.5 20.2H8.5V21.8H15.5V20.2ZM8.5 20.2C6.96753 20.2 5.8 19.0334 5.8 17.6842H4.2C4.2 19.9975 6.16648 21.8 8.5 21.8V20.2ZM18.2 17.6842C18.2 19.0334 17.0325 20.2 15.5 20.2V21.8C17.8335 21.8 19.8 19.9975 19.8 17.6842H18.2ZM15.5 15.1684C17.0325 15.1684 18.2 16.335 18.2 17.6842H19.8C19.8 15.3709 17.8335 13.5684 15.5 13.5684V15.1684ZM8.5 13.5684C6.16648 13.5684 4.2 15.3709 4.2 17.6842H5.8C5.8 16.335 6.96753 15.1684 8.5 15.1684V13.5684Z" fill="currentColor" stroke-width="1.1"></path>
      </svg> Profile
      </li>
      <li class="inline-flex items-center gap-x-3.5 py-3 px-4 text-sm font-semibold bg-white border border-gray-300 hover:text-indigo-600 transition-all duration-300  text-gray-900 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg ">
      <svg class="flex-none stroke-gray-900" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M2.00017 10.7608C2.0002 7.22186 2.00021 5.45239 3.04181 4.3078C3.12632 4.21493 3.21515 4.1261 3.30803 4.04159C4.45262 3 6.22198 3 9.76069 3C11.195 3 12.6369 3 14.0022 3C17.7721 3.00001 19.6571 3.00001 20.8286 4.17158C22.0002 5.34314 22.0002 7.22876 22.0003 11C22.0003 11.8333 22.0003 12.6667 22.0002 13.5C22.0002 14.8957 22.0002 15.5936 21.8279 16.1615C21.44 17.4396 20.4398 18.4398 19.1617 18.8277C18.5938 19 17.8958 19 16.5 19V19C15.7153 19 15.4119 19.1702 15.0563 19.3115C14.0356 19.7169 13.1336 21.6253 12.0002 21.6253C10.8667 21.6253 9.96477 19.7169 8.94405 19.3115C7.99061 18.9328 7.00755 19 6.00017 19V19C3.84257 19 2.00019 17.3235 2.00016 15.1659C2.00014 13.6975 2.00015 12.2292 2.00017 10.7608Z" stroke="currentColor" stroke-width="1.3"></path>
      </svg> Messages
      </li>
      <li class="inline-flex items-center gap-x-3.5 py-3 px-4 text-sm font-semibold bg-white border border-gray-300 hover:text-indigo-600 transition-all duration-300  text-gray-900 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg ">
      <svg class="flex-none stroke-gray-900" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M2 10.2969V13.7031C2 14.1734 2.38209 14.5546 2.85343 14.5546C5.13807 14.5546 6.56533 17.0329 5.43635 19.0191C5.20068 19.4264 5.34054 19.9472 5.74873 20.1824L8.7051 21.8855C9.11329 22.1206 9.63524 21.9811 9.87091 21.5738C11.0151 19.5963 13.878 19.6055 15.0375 21.5741C15.2731 21.9814 15.7951 22.1209 16.2033 21.8858L19.1596 20.1827C19.5678 19.9475 19.7077 19.4267 19.472 19.0194C18.3432 17.0329 19.7708 14.5546 22.0557 14.5546C22.527 14.5546 22.9091 14.1734 22.9091 13.7031V10.2969C22.9091 9.82661 22.527 9.44536 22.0557 9.44536C19.771 9.44536 18.3438 6.96706 19.4727 4.98087C19.7084 4.57358 19.5686 4.05278 19.1604 3.81763L16.204 2.11454C15.7958 1.87939 15.2738 2.01894 15.0382 2.42623C13.8786 4.39479 11.0159 4.40344 9.87163 2.42592C9.63596 2.01863 9.11401 1.87908 8.70582 2.11423L5.74944 3.81732C5.34125 4.05247 5.2014 4.57327 5.43707 4.98056C6.56584 6.96709 5.13826 9.44536 2.85343 9.44536C2.38209 9.44536 2 9.82661 2 10.2969Z" stroke="currentColor" stroke-width="1.2"></path>
        <path d="M15.6364 11.5455C15.6364 13.3027 14.2118 14.7273 12.4545 14.7273C10.6973 14.7273 9.27273 13.3027 9.27273 11.5455C9.27273 9.78819 10.6973 8.36364 12.4545 8.36364C14.2118 8.36364 15.6364 9.78819 15.6364 11.5455Z" stroke="currentColor" stroke-width="1.2"></path>
      </svg> Settings
      </li>
      </ul>

By using <a> actionable list group items can be created with disable, hover or active state.

Active Link Disabled 
 <div class="w-60 flex flex-col rounded-lg">
      <a href="javascript:;" aria-current="true" class="inline-flex items-center gap-x-3.5 py-3 px-4 text-sm font-semibold  rounded-t-lg cursor-pointer border border-gray-300 hover:text-indigo-600 transition-all duration-300 text-indigo-600 focus:outline-none "> Active </a>
      <a class="inline-flex items-center gap-x-3.5 py-3 px-4 text-sm font-semibold bg-white border border-gray-300 transition-all duration-300 text-gray-900 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg hover:text-indigo-600 focus:z-10 focus:outline-none" href="javascript:;"> Link </a>
      <a href="javascript:;" class="inline-flex items-center gap-x-3.5 py-3 px-4 text-sm font-semibold bg-gray-50 border border-gray-300 transition-all duration-300 text-gray-300 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg focus:z-10 focus:outline-none cursor-not-allowed"> Disabled </a>
      </div>

list group with buttons

By using <button> actionable tailwind css list items can be created with disable, hover or active state.

 <div class="w-60 flex flex-col">
      <button type="button" class="inline-flex items-center gap-x-3.5 py-3 px-4 text-sm font-semibold border border-gray-300 text-indigo-600 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg focus:z-10 focus:outline-none"> Active </button>
      <button type="button" class="inline-flex items-center gap-x-3.5 py-3 px-4 text-sm font-semibold bg-white border border-gray-300 text-gray-900 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg hover:text-indigo-600 focus:z-10 focus:outline-none"> Link </button>
      <button type="button" class="inline-flex items-center gap-x-3.5 py-3 px-4 text-sm font-semibold border border-gray-300 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"> Disabled </button>
      </div>

Stripe look

Stripe look in the list group can also be set to make it look more attractive and appealing.Use follwoing example for new tailwind list style.

  • Profile
  • Settings
  • Newsletter
  • Downloads
  • Team Account 
 <ul class="w-60 flex flex-col">
      <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-semibold odd:bg-gray-100 bg-white border text-gray-900 -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 text-sm font-semibold odd:bg-gray-100 bg-white border text-gray-900 -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 text-sm font-semibold odd:bg-gray-100 bg-white border text-gray-900 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg"> Newsletter </li>
      <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-semibold odd:bg-gray-100 bg-white border text-gray-900 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg"> Downloads </li>
      <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-semibold odd:bg-gray-100 bg-white border text-gray-900 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg"> Team Account </li>
      </ul>

list group with no gutters

Whenever left or right padding is not required then the following example can be used.

  • Profile
  • Settings
  • Newsletter 
 <ul class="w-60 flex flex-col divide-y divide-gray-200 ">
      <li class="inline-flex items-center gap-x-2 py-3 text-sm font-medium text-gray-900 "> Profile </li>
      <li class="inline-flex items-center gap-x-2 py-3 text-sm font-medium text-gray-900 "> Settings </li>
      <li class="inline-flex items-center gap-x-2 py-3 text-sm font-medium text-gray-900 "> Newsletter </li>
      </ul>

Horizontal list group

As the name suggests in this list, the group will be shown horizontally.

  • Home
  • Profile
  • Messages
  • Settings 
 <ul class="w-60 flex flex-col sm:flex-row">
      <li class="inline-flex items-center gap-x-3.5 py-3 px-4 text-sm font-medium bg-white border text-gray-900 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg sm:-ml-px sm:mt-0 sm:first:rounded-tr-none sm:first:rounded-bl-lg sm:last:rounded-bl-none sm:last:rounded-tr-lg ">
      <svg class="flex-none fill-gray-900" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M2.56826 12.688L1.77756 12.8096L2.56826 12.688ZM3.21817 16.9124L2.42747 17.034L3.21817 16.9124ZM20.7836 16.9124L19.9929 16.7907L20.7836 16.9124ZM21.4335 12.688L20.6428 12.5663L21.4335 12.688ZM18.944 6.86024L18.4853 7.51562L18.944 6.86024ZM15.4417 4.40856L15.9004 3.75318V3.75318L15.4417 4.40856ZM8.56011 4.40856L8.10134 3.75318L8.56011 4.40856ZM5.05772 6.86024L4.59895 6.20485L5.05772 6.86024ZM19.3805 21.2769L18.8596 20.6697V20.6697L19.3805 21.2769ZM4.62125 21.2769L5.14215 20.6697H5.14215L4.62125 21.2769ZM2.49086 9.20932L3.22654 9.52359L2.49086 9.20932ZM10.5009 17.2C10.0591 17.2 9.70088 17.5582 9.70088 18C9.70088 18.4418 10.0591 18.8 10.5009 18.8V17.2ZM13.5009 18.8C13.9427 18.8 14.3009 18.4418 14.3009 18C14.3009 17.5582 13.9427 17.2 13.5009 17.2V18.8ZM1.77756 12.8096L2.42747 17.034L4.00886 16.7907L3.35896 12.5663L1.77756 12.8096ZM9.1484 22.8H14.8534V21.2H9.1484V22.8ZM21.5743 17.034L22.2242 12.8096L20.6428 12.5663L19.9929 16.7907L21.5743 17.034ZM19.4028 6.20485L15.9004 3.75318L14.9829 5.06395L18.4853 7.51562L19.4028 6.20485ZM8.10134 3.75318L4.59895 6.20485L5.51649 7.51562L9.01888 5.06395L8.10134 3.75318ZM15.9004 3.75318C15.0835 3.18133 14.4175 2.7137 13.835 2.3962C13.2347 2.06903 12.6557 1.86199 12.0009 1.86199V3.46199C12.2917 3.46199 12.6014 3.54604 13.0692 3.80106C13.5549 4.06575 14.1364 4.47141 14.9829 5.06395L15.9004 3.75318ZM9.01888 5.06395C9.86536 4.47141 10.4469 4.06575 10.9325 3.80106C11.4004 3.54604 11.7101 3.46199 12.0009 3.46199V1.86199C11.346 1.86199 10.767 2.06903 10.1668 2.3962C9.58427 2.7137 8.91826 3.18133 8.10134 3.75318L9.01888 5.06395ZM22.2242 12.8096C22.3597 11.929 22.4715 11.2087 22.5009 10.6107C22.5313 9.9942 22.4793 9.43988 22.2466 8.89506L20.7752 9.52359C20.879 9.76665 20.9264 10.0547 20.9029 10.5321C20.8785 11.028 20.7833 11.6531 20.6428 12.5663L22.2242 12.8096ZM18.4853 7.51562C19.2422 8.04549 19.7596 8.40888 20.1348 8.73413C20.496 9.04717 20.6714 9.28053 20.7752 9.52359L22.2466 8.89506C22.0139 8.35024 21.6493 7.92945 21.1828 7.52513C20.7305 7.133 20.1327 6.71579 19.4028 6.20485L18.4853 7.51562ZM14.8534 22.8C16.0608 22.8 17.0409 22.8015 17.8217 22.7034C18.6247 22.6025 19.3158 22.3865 19.9014 21.8841L18.8596 20.6697C18.6024 20.8904 18.258 21.036 17.6222 21.1159C16.9642 21.1985 16.1022 21.2 14.8534 21.2V22.8ZM19.9929 16.7907C19.803 18.025 19.6705 18.8768 19.4887 19.5146C19.3131 20.1308 19.1168 20.4491 18.8596 20.6697L19.9014 21.8841C20.4871 21.3816 20.8056 20.7315 21.0274 19.9531C21.2431 19.1963 21.3907 18.2274 21.5743 17.034L19.9929 16.7907ZM2.42747 17.034C2.61106 18.2274 2.75864 19.1963 2.97433 19.9531C3.19617 20.7315 3.51468 21.3816 4.10034 21.8841L5.14215 20.6697C4.88495 20.4491 4.68867 20.1308 4.51305 19.5146C4.33129 18.8768 4.19875 18.025 4.00886 16.7907L2.42747 17.034ZM9.1484 21.2C7.89959 21.2 7.03756 21.1985 6.37955 21.1159C5.74381 21.036 5.39935 20.8904 5.14215 20.6697L4.10034 21.8841C4.686 22.3865 5.37702 22.6025 6.18009 22.7034C6.96089 22.8015 7.941 22.8 9.1484 22.8V21.2ZM3.35896 12.5663C3.21846 11.6531 3.1233 11.028 3.09889 10.5321C3.07539 10.0547 3.12271 9.76665 3.22654 9.52359L1.75517 8.89506C1.52244 9.43988 1.47047 9.9942 1.50082 10.6107C1.53026 11.2087 1.64208 11.929 1.77756 12.8096L3.35896 12.5663ZM4.59895 6.20485C3.86903 6.71579 3.27129 7.133 2.81892 7.52513C2.35248 7.92945 1.9879 8.35024 1.75517 8.89506L3.22654 9.52359C3.33037 9.28053 3.50579 9.04717 3.86693 8.73413C4.24213 8.40888 4.75953 8.04549 5.51649 7.51562L4.59895 6.20485ZM10.5009 18.8H13.5009V17.2L10.5009 17.2V18.8Z" fill="currentColor" stroke-width="3"></path>
      </svg> Home
      </li>
      <li class="inline-flex items-center gap-x-3.5 py-3 px-4 text-sm font-medium bg-white border text-gray-900 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg sm:-ml-px sm:mt-0 sm:first:rounded-tr-none sm:first:rounded-bl-lg sm:last:rounded-bl-none sm:last:rounded-tr-lg">
      <svg class="flex-none fill-gray-900" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12.1601 11.4032L12.0846 12.1996C12.1181 12.2028 12.1519 12.2038 12.1855 12.2028L12.1601 11.4032ZM11.8301 11.4032L11.8046 12.2028C11.836 12.2038 11.8674 12.2029 11.8987 12.2002L11.8301 11.4032ZM16.4401 7.20632L17.2401 7.20983V7.20632H16.4401ZM12.2355 10.6067C12.0831 10.5923 11.9147 10.5929 11.7614 10.6061L11.8987 12.2002C11.9654 12.1945 12.037 12.1951 12.0846 12.1996L12.2355 10.6067ZM11.8555 10.6036C9.86902 10.5403 8.36006 9.01086 8.36006 7.20632H6.76006C6.76006 9.94914 9.0311 12.1144 11.8046 12.2028L11.8555 10.6036ZM8.36006 7.20632C8.36006 5.36615 9.94178 3.8 12.0001 3.8V2.2C9.13833 2.2 6.76006 4.40437 6.76006 7.20632H8.36006ZM12.0001 3.8C14.0495 3.8 15.6401 5.3673 15.6401 7.20632H17.2401C17.2401 4.40323 14.8506 2.2 12.0001 2.2V3.8ZM15.6401 7.2028C15.6321 9.01079 14.1203 10.5403 12.1346 10.6036L12.1855 12.2028C14.9598 12.1144 17.228 9.94921 17.2401 7.20983L15.6401 7.2028ZM8.5 15.1684H15.5V13.5684H8.5V15.1684ZM15.5 20.2H8.5V21.8H15.5V20.2ZM8.5 20.2C6.96753 20.2 5.8 19.0334 5.8 17.6842H4.2C4.2 19.9975 6.16648 21.8 8.5 21.8V20.2ZM18.2 17.6842C18.2 19.0334 17.0325 20.2 15.5 20.2V21.8C17.8335 21.8 19.8 19.9975 19.8 17.6842H18.2ZM15.5 15.1684C17.0325 15.1684 18.2 16.335 18.2 17.6842H19.8C19.8 15.3709 17.8335 13.5684 15.5 13.5684V15.1684ZM8.5 13.5684C6.16648 13.5684 4.2 15.3709 4.2 17.6842H5.8C5.8 16.335 6.96753 15.1684 8.5 15.1684V13.5684Z" fill="currentColor" stroke-width="1.1"></path>
      </svg> Profile
      </li>
      <li class="inline-flex items-center gap-x-3.5 py-3 px-4 text-sm font-medium bg-white border text-gray-900 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg sm:-ml-px sm:mt-0 sm:first:rounded-tr-none sm:first:rounded-bl-lg sm:last:rounded-bl-none sm:last:rounded-tr-lg">
      <svg class="flex-none stroke-gray-900" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M2.00017 10.7608C2.0002 7.22186 2.00021 5.45239 3.04181 4.3078C3.12632 4.21493 3.21515 4.1261 3.30803 4.04159C4.45262 3 6.22198 3 9.76069 3C11.195 3 12.6369 3 14.0022 3C17.7721 3.00001 19.6571 3.00001 20.8286 4.17158C22.0002 5.34314 22.0002 7.22876 22.0003 11C22.0003 11.8333 22.0003 12.6667 22.0002 13.5C22.0002 14.8957 22.0002 15.5936 21.8279 16.1615C21.44 17.4396 20.4398 18.4398 19.1617 18.8277C18.5938 19 17.8958 19 16.5 19V19C15.7153 19 15.4119 19.1702 15.0563 19.3115C14.0356 19.7169 13.1336 21.6253 12.0002 21.6253C10.8667 21.6253 9.96477 19.7169 8.94405 19.3115C7.99061 18.9328 7.00755 19 6.00017 19V19C3.84257 19 2.00019 17.3235 2.00016 15.1659C2.00014 13.6975 2.00015 12.2292 2.00017 10.7608Z" stroke="currentColor" stroke-width="1.3"></path>
      </svg> Messages
      </li>
      <li class="inline-flex items-center gap-x-3.5 py-3 px-4 text-sm font-medium bg-white border text-gray-900 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg sm:-ml-px sm:mt-0 sm:first:rounded-tr-none sm:first:rounded-bl-lg sm:last:rounded-bl-none sm:last:rounded-tr-lg ">
      <svg class="flex-none stroke-gray-900" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M2 10.2969V13.7031C2 14.1734 2.38209 14.5546 2.85343 14.5546C5.13807 14.5546 6.56533 17.0329 5.43635 19.0191C5.20068 19.4264 5.34054 19.9472 5.74873 20.1824L8.7051 21.8855C9.11329 22.1206 9.63524 21.9811 9.87091 21.5738C11.0151 19.5963 13.878 19.6055 15.0375 21.5741C15.2731 21.9814 15.7951 22.1209 16.2033 21.8858L19.1596 20.1827C19.5678 19.9475 19.7077 19.4267 19.472 19.0194C18.3432 17.0329 19.7708 14.5546 22.0557 14.5546C22.527 14.5546 22.9091 14.1734 22.9091 13.7031V10.2969C22.9091 9.82661 22.527 9.44536 22.0557 9.44536C19.771 9.44536 18.3438 6.96706 19.4727 4.98087C19.7084 4.57358 19.5686 4.05278 19.1604 3.81763L16.204 2.11454C15.7958 1.87939 15.2738 2.01894 15.0382 2.42623C13.8786 4.39479 11.0159 4.40344 9.87163 2.42592C9.63596 2.01863 9.11401 1.87908 8.70582 2.11423L5.74944 3.81732C5.34125 4.05247 5.2014 4.57327 5.43707 4.98056C6.56584 6.96709 5.13826 9.44536 2.85343 9.44536C2.38209 9.44536 2 9.82661 2 10.2969Z" stroke="currentColor" stroke-width="1.2"></path>
      <path d="M15.6364 11.5455C15.6364 13.3027 14.2118 14.7273 12.4545 14.7273C10.6973 14.7273 9.27273 13.3027 9.27273 11.5455C9.27273 9.78819 10.6973 8.36364 12.4545 8.36364C14.2118 8.36364 15.6364 9.78819 15.6364 11.5455Z" stroke="currentColor" stroke-width="1.2"></path>
      </svg> Settings
      </li>
      </ul>

list group with badge

Badges can be added in the list group item to show more information viz. unread items, unchecked mails or other activities.

  • Profile 03
  • Settings 2
  • Newsletter New 
<ul class="w-60 flex flex-col">
      <li class=" inline-flex items-center gap-x-2 py-3 px-4 text-sm font-semibold bg-white border border-gray-300 text-gray-900 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg cursor-pointer">
      <div class="group flex justify-between w-full hover:text-indigo-600"> Profile <span class="inline-flex items-center py-1 px-2 rounded-full text-xs font-semibold transition-all duration-150 bg-gray-300 text-gray-700 group-hover:bg-indigo-600 group-hover:text-white">03</span>
      </div>
      </li>
      <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-semibold bg-white border border-gray-300 text-gray-900 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg cursor-pointer">
      <div class="group flex justify-between w-full hover:text-indigo-600"> Settings <span class="inline-flex items-center py-1 px-2 rounded-full text-xs font-semibold bg-gray-300 text-gray-700 group-hover:bg-indigo-600 group-hover:text-white">2</span>
      </div>
      </li>
      <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-semibold bg-white border border-gray-300 text-gray-900 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg cursor-pointer">
      <div class="group flex justify-between w-full hover:text-indigo-600"> Newsletter <span class="inline-flex items-center py-1 px-2 rounded-full text-xs font-semibold bg-gray-300 text-gray-700 group-hover:bg-indigo-600 group-hover:text-white">New</span>
      </div>
      </li>
      </ul>