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

3 years ago

11.3k
List section
Beautiful list section with left border

Leon Bachmann

3 years ago

12.1k
Logo cloud

Alok

3 years ago

10.9k
Document index page list

sql_guru

3 years ago

13.1k
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

449
Basic list

Leon Bachmann

3 years ago

10.6k
Order Delivered List

ABDO-SY

1 year ago

1.2k
Event timeline list

Laurits

3 years ago

14k
Bullet points list
for sections like "Why Choose Us"

Orson Kincaid

1 year ago

2.4k
List with border

Samuel Dawson

3 years ago

11.6k
Nested list

Lukas Müller

3 years ago

14k
Game Character Cards
Simple game character cards selection

Diavox Jerome Soriano

1 year ago

1.8k

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.