Tailwind CSS Lists

• Item one
• Item two
• Item three
• Item four

<ul class="list-disc list-inside space-y-2">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
  <li>Item four</li>
</ul>

1. First item
2. Second item
3. Third item
4. Fourth item

<ol class="list-decimal list-inside space-y-2">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
</ol>

• First custom bullet item
• Second custom bullet item
• Third custom bullet item

<ul class="list-none space-y-2">
  <li class="flex items-center">
    <svg class="w-4 h-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.707a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
    </svg>
    First custom bullet item
  </li>
  <li class="flex items-center">
    <svg class="w-4 h-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.707a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
    </svg>
    Second custom bullet item
  </li>
  <li class="flex items-center">
    <svg class="w-4 h-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.707a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
    </svg>
    Third custom bullet item
  </li>
</ul>

1. Step One
   • Sub-step 1.1
   • Sub-step 1.2
2. Step Two
   • Sub-step 2.1
   • Sub-step 2.2
3. Step Three
   • Sub-step 3.1
   • Sub-step 3.2

<ol class="list-decimal list-inside space-y-2">
  <li>Step One
    <ul class="list-disc list-inside pl-5 mt-1 space-y-1">
      <li>Sub-step 1.1</li>
      <li>Sub-step 1.2</li>
    </ul>
  </li>
  <li>Step Two
    <ul class="list-disc list-inside pl-5 mt-1 space-y-1">
      <li>Sub-step 2.1</li>
      <li>Sub-step 2.2</li>
    </ul>
  </li>
  <li>Step Three
    <ul class="list-disc list-inside pl-5 mt-1 space-y-1">
      <li>Sub-step 3.1</li>
      <li>Sub-step 3.2</li>
    </ul>
  </li>
</ol>

• Item one
• Item two
• Item three
• Item four

<ul class="list-disc list-inside space-y-2 marker:text-pink-400">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
  <li>Item four</li>
</ul>

• Indented by 1 level
• Indented by 2 levels
• Indented by 3 levels
• Indented by 4 levels

<ul class="list-disc list-inside space-y-2">
  <li class="pl-4">Indented by 1 level</li>
  <li class="pl-8">Indented by 2 levels</li>
  <li class="pl-12">Indented by 3 levels</li>
  <li class="pl-16">Indented by 4 levels</li>
</ul>

• First item with custom spacing
• Second item with custom spacing
• Third item with custom spacing
• Fourth item with custom spacing

<ul class="list-disc list-inside space-y-6">
    <li>First item with custom spacing</li>
    <li>Second item with custom spacing</li>
    <li>Third item with custom spacing</li>
    <li>Fourth item with custom spacing</li>
</ul>

<div class="bg-white shadow rounded-lg max-w-sm">
    <ul class="divide-y divide-gray-200">
      <li class="p-4 hover:bg-gray-50 cursor-pointer">Item 1</li>
      <li class="p-4 hover:bg-gray-50 cursor-pointer">Item 2</li>
      <li class="p-4 hover:bg-gray-50 cursor-pointer">Item 3</li>
      <li class="p-4 hover:bg-gray-50 cursor-pointer">Item 4</li>
    </ul>
  </div>