Home
Amit Pachange
Item List

Item List

This tailwind example is contributed by Amit Pachange, on 18-Aug-2022. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

List

Author Amit Pachange

9.8k

10

Fork Fullscreen

<ul class="space-y-3 text-lg border border-2 border-indigo-400 rounded-lg p-5">
  <li class="flex space-x-3">
    <svg class="flex-shrink-0 h-6 w-6 text-blue-600" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z" fill="currentColor"/>
    </svg>
    <span class="text-gray-800 dark:text-gray-400">
      List Item 1
    </span>
  </li>

<li class="flex space-x-3">
    <svg class="flex-shrink-0 h-6 w-6 text-blue-600" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z" fill="currentColor"/>
    </svg>
    <span class="text-gray-800 dark:text-gray-400">
      List Item 2
    </span>
  </li>

<li class="flex space-x-3">
    <svg class="flex-shrink-0 h-6 w-6 text-blue-600" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z" fill="currentColor"/>
    </svg>
    <span class="text-gray-800 dark:text-gray-400">
      List Item 3
    </span>
  </li>
</ul>

Related Examples

Feature List

Author:
Laurits

3 years ago

10.4k
Responsive list

Author:
Sienna

2 years ago

12.1k
Nested list

Author:
Lukas Müller

2 years ago

13k
Article List Section
A section displaying a list of articles with associated information.

Author:
Junclarkaizen Pagu

2 years ago

6.9k
Basic list

Author:
Leon Bachmann

2 years ago

10.3k
Feature list
list section

Author:
Gopi Yadav

2 years ago

10.5k
Users ranking list with points

Author:
Leif99

2 years ago

11.7k
List example

Author:
Isabella Kowalski

2 years ago

13.8k
List component

Author:
Shru hari

1 year ago

3k
Projects List

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

9 months ago

1.3k
Services list

Author:
ariaw

2 weeks ago

16
Minimal list section

Author:
Task Master

2 years ago

8.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.12