Feature List

This tailwind example is contributed by Laurits, on 03-Oct-2022. Component is made with Tailwind v3.4. It is responsive.

List

Author Laurits

Tailwind v3.4 11.3k 9

Fork Fullscreen

<div>
    <h1 class="font-bold text-xl text-green-900">Feature List</h1>
    <ul class="mt-3 flex flex-col space-y-2">
        <li class="flex"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" aria-hidden="true" class="mr-2 h-auto w-6 text-green-600 sm:w-7">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z">
                </path>
            </svg>
            <p class="text-base text-slate-700 sm:text-lg">30 seconds to setup</p>
        </li>
        <li class="flex"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" aria-hidden="true" class="mr-2 h-auto w-6 text-green-600 sm:w-7">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z">
                </path>
            </svg>
            <p class="text-base text-slate-700 sm:text-lg">Easy to use</p>
        </li>
        <li class="flex"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" aria-hidden="true" class="mr-2 h-auto w-6 text-green-600 sm:w-7">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z">
                </path>
            </svg>
            <p class="text-base text-slate-700 sm:text-lg">Generous free-tier</p>
        </li>
    </ul>
</div>

Related Examples

Features list with heading

Leon Bachmann

3 years ago

12.1k
Feature List
Feature List Card (Responsive and supports Dark Mode)

Mr Robot

4 years ago

11.7k
Item List

Amit Pachange

4 years ago

10.9k
Features list with icons

L.J. Weber

3 years ago

15.2k
Logo cloud

Alok

3 years ago

11k
Todo list template

Steven Kuhn

3 years ago

19.5k
Organization Hierarchy list

Anonymous

3 years ago

9.8k
Nested list
A nested list is suitable for a table of contents / navigational list

Noob

4 years ago

21.8k
Table
Table with image and status with pagination buttons

Abhiraj

1 year ago

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

Orson Kincaid

2 years ago

2.5k
Order Delivered List

ABDO-SY

1 year ago

1.5k
MENU OMERLINKS
MENU OMERLINKS

Omer fils ELENGA

8 months ago

725