Components

lists

Create engaging lists using Tailwind CSS, a powerful tool for styling ordered and unordered elements, enhancing readability, and user experience.

Setting the list style type

Copied!
list-disc
  • Now this is a story all about how, my life got flipped turned upside down
  • And I like to take a minute and sit right here
  • I'll tell you how I became the prince of a town called Bel-Air
list-decimal
  1. Now this is a story all about how, my life got flipped turned upside down
  2. And I like to take a minute and sit right here
  3. I'll tell you how I became the prince of a town called Bel-Air
list-none
  • Now this is a story all about how, my life got flipped turned upside down
  • And I like to take a minute and sit right here
  • I'll tell you how I became the prince of a town called Bel-Air 
        
<div>
  <span class="font-medium text-sm text-gray-500 font-mono mb-3 dark:text-gray-400">list-disc</span>
  <ul class="list-disc list-inside text-gray-800 dark:text-white">
    <li>Now this is a story all about how, my life got flipped turned upside down</li>
    <li>And I like to take a minute and sit right here</li>
    <li>I'll tell you how I became the prince of a town called Bel-Air </li>
  </ul>
</div>

<div>
  <span class="font-medium text-sm text-gray-500 font-mono mb-3 dark:text-gray-400">list-decimal</span>
  <ol class="list-decimal list-inside text-gray-800 dark:text-white">
    <li>Now this is a story all about how, my life got flipped turned upside down</li>
    <li>And I like to take a minute and sit right here</li>
    <li>I'll tell you how I became the prince of a town called Bel-Air </li>
  </ol>
</div>

<div>
  <span class="font-medium text-sm text-gray-500 font-mono mb-3 dark:text-gray-400">list-none</span>
  <ul class="list-none list-inside text-gray-800 dark:text-white">
    <li>Now this is a story all about how, my life got flipped turned upside down</li>
    <li>And I like to take a minute and sit right here</li>
    <li>I'll tell you how I became the prince of a town called Bel-Air </li>
  </ul>
</div>

List marker

Copied!
  • FAQ
  • License
  • Terms & Conditions 
        
<ul class="marker:text-blue-600 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>

Separator

Copied!
  • FAQ
  • License
  • Terms & Conditions 
        
<ul class="text-sm text-gray-600">
  <li class="inline-block relative pe-8 last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:end-3 before:-translate-y-1/2 before:size-1 before:bg-gray-300 before:rounded-full dark:text-gray-400 dark:before:bg-gray-600">
    FAQ
  </li>
  <li class="inline-block relative pe-8 last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:end-3 before:-translate-y-1/2 before:size-1 before:bg-gray-300 before:rounded-full dark:text-gray-400 dark:before:bg-gray-600">
    License
  </li>
  <li class="inline-block relative pe-8 last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:end-3 before:-translate-y-1/2 before:size-1 before:bg-gray-300 before:rounded-full dark:text-gray-400 dark:before:bg-gray-600">
    Terms & Conditions
  </li>
</ul>

List checked color variations

Copied!
  • FAQ
  • License
  • Terms & Conditions
  • FAQ
  • License
  • Terms & Conditions
  • FAQ
  • License
  • Terms & Conditions 
        
<ul class="space-y-3 text-sm">
  <li class="flex space-x-3">
    <svg class="flex-shrink-0 size-4 mt-0.5 text-blue-600 dark:text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <polyline points="20 6 9 17 4 12"></polyline>
    </svg>
    <span class="text-gray-800 dark:text-gray-400">
      FAQ
    </span>
  </li>

  <li class="flex space-x-3">
    <svg class="flex-shrink-0 size-4 mt-0.5 text-blue-600 dark:text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <polyline points="20 6 9 17 4 12"></polyline>
    </svg>
    <span class="text-gray-800 dark:text-gray-400">
      License
    </span>
  </li>

  <li class="flex space-x-3">
    <svg class="flex-shrink-0 size-4 mt-0.5 text-blue-600 dark:text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <polyline points="20 6 9 17 4 12"></polyline>
    </svg>
    <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-blue-50 text-blue-600 dark:bg-blue-800/30 dark:text-blue-500">
      <svg class="flex-shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="20 6 9 17 4 12"></polyline>
      </svg>
    </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-blue-50 text-blue-600 dark:bg-blue-800/30 dark:text-blue-500">
      <svg class="flex-shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="20 6 9 17 4 12"></polyline>
      </svg>
    </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-blue-50 text-blue-600 dark:bg-blue-800/30 dark:text-blue-500">
      <svg class="flex-shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="20 6 9 17 4 12"></polyline>
      </svg>
    </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-blue-600 text-white dark:bg-blue-500">
      <svg class="flex-shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="20 6 9 17 4 12"></polyline>
      </svg>
    </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-blue-600 text-white dark:bg-blue-500">
      <svg class="flex-shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="20 6 9 17 4 12"></polyline>
      </svg>
    </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-blue-600 text-white dark:bg-blue-500">
      <svg class="flex-shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="20 6 9 17 4 12"></polyline>
      </svg>
    </span>
    <span class="text-gray-800 dark:text-gray-400">
      Terms & Conditions
    </span>
  </li>
</ul>

List checked color variations

Copied!
  • Dark
  • Gray
  • Green
  • Blue
  • Red
  • Yellow
  • Light
  • Dark
  • Gray
  • Green
  • Blue
  • Red
  • Yellow
  • Light
  • Dark
  • Gray
  • Green
  • Blue
  • Red
  • Yellow
  • Light 
        
<ul class="space-y-3 text-sm">
  <li class="flex space-x-3">
    <svg class="flex-shrink-0 size-4 mt-0.5 text-gray-800 dark:text-white" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <polyline points="20 6 9 17 4 12"></polyline>
    </svg>
    <span class="text-gray-600 dark:text-white">
      Dark
    </span>
  </li>

  <li class="flex space-x-3">
    <svg class="flex-shrink-0 size-4 mt-0.5 text-gray-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <polyline points="20 6 9 17 4 12"></polyline>
    </svg>
    <span class="text-gray-600 dark:text-white">
      Gray
    </span>
  </li>

  <li class="flex space-x-3">
    <svg class="flex-shrink-0 size-4 mt-0.5 text-teal-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <polyline points="20 6 9 17 4 12"></polyline>
    </svg>
    <span class="text-gray-600 dark:text-white">
      Green
    </span>
  </li>

  <li class="flex space-x-3">
    <svg class="flex-shrink-0 size-4 mt-0.5 text-blue-600 dark:text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <polyline points="20 6 9 17 4 12"></polyline>
    </svg>
    <span class="text-gray-600 dark:text-white">
      Blue
    </span>
  </li>

  <li class="flex space-x-3">
    <svg class="flex-shrink-0 size-4 mt-0.5 text-red-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <polyline points="20 6 9 17 4 12"></polyline>
    </svg>
    <span class="text-gray-600 dark:text-white">
      Red
    </span>
  </li>

  <li class="flex space-x-3">
    <svg class="flex-shrink-0 size-4 mt-0.5 text-yellow-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <polyline points="20 6 9 17 4 12"></polyline>
    </svg>
    <span class="text-gray-600 dark:text-white">
      Yellow
    </span>
  </li>

  <li class="flex space-x-3">
    <svg class="flex-shrink-0 size-4 mt-0.5 text-white" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <polyline points="20 6 9 17 4 12"></polyline>
    </svg>
    <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">
      <svg class="flex-shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="20 6 9 17 4 12"></polyline>
      </svg>
    </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">
      <svg class="flex-shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="20 6 9 17 4 12"></polyline>
      </svg>
    </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-teal-50 text-teal-500 dark:bg-teal-800/30 dark:text-teal-500">
      <svg class="flex-shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="20 6 9 17 4 12"></polyline>
      </svg>
    </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-blue-60 text-blue-600 dark:bg-blue-800/30 dark:text-blue-500">
      <svg class="flex-shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="20 6 9 17 4 12"></polyline>
      </svg>
    </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-red-50 text-red-500 dark:bg-red-800/30 dark:text-red-500">
      <svg class="flex-shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="20 6 9 17 4 12"></polyline>
      </svg>
    </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-yellow-50 text-yellow-500 dark:bg-yellow-800/30 dark:text-yellow-500">
      <svg class="flex-shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="20 6 9 17 4 12"></polyline>
      </svg>
    </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">
      <svg class="flex-shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="20 6 9 17 4 12"></polyline>
      </svg>
    </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">
      <svg class="flex-shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="20 6 9 17 4 12"></polyline>
      </svg>
    </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">
      <svg class="flex-shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="20 6 9 17 4 12"></polyline>
      </svg>
    </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-teal-500 text-white">
      <svg class="flex-shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="20 6 9 17 4 12"></polyline>
      </svg>
    </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-blue-600 text-white dark:bg-blue-500">
      <svg class="flex-shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="20 6 9 17 4 12"></polyline>
      </svg>
    </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-red-500 text-white">
      <svg class="flex-shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="20 6 9 17 4 12"></polyline>
      </svg>
    </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-yellow-500 text-white">
      <svg class="flex-shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="20 6 9 17 4 12"></polyline>
      </svg>
    </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">
      <svg class="flex-shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="20 6 9 17 4 12"></polyline>
      </svg>
    </span>
    <span class="text-gray-600 dark:text-white">
      Light
    </span>
  </li>
</ul>

On this page