Item List

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

List

Author Amit Pachange

Tailwind v3.4 10.9k 11

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

Laurits

4 years ago

11.3k
Game Character Cards
Simple game character cards selection

Diavox Jerome Soriano

1 year ago

1.8k
List of steps

Leif99

3 years ago

13.9k
ToDo

Im_angeo

5 months ago

520
Responsive list
Horizontal list of items

Sophia Baker

3 years ago

10.9k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

5 months ago

478
List example

Wagner Augusto

2 years ago

2.5k
List example

Isabella Kowalski

3 years ago

14.9k
Basic list

Sophia Baker

3 years ago

11k
todo list with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

2.3k
List component

Shru hari

2 years ago

3.7k
MENU OMERLINKS
MENU OMERLINKS

Omer fils ELENGA

8 months ago

726

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.