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 11k 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
Feature list
list section

Gopi Yadav

3 years ago

11.4k
Features list with icons

L.J. Weber

3 years ago

15.3k
Stacked list

Odessa Young

3 years ago

20k
List example

Isabella Kowalski

3 years ago

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

Orson Kincaid

2 years ago

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

Junclarkaizen Pagu

3 years ago

8k
Twitter like users list

Simon Scheffer

3 years ago

12.8k
Event timeline list

Laurits

3 years ago

14.1k
Nested list section
List with soft background colors. List with Hierarchy

Orion.c

3 years ago

12.4k
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)

6 months ago

489
Responsive list with 3 columns

TailwindFlex

3 years ago

14.4k

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.