Home
Leon Bachmann
List section

List section

Beautiful list section with left border

This tailwind example is contributed by Leon Bachmann, on 24-Jan-2023. Component is made with Tailwind CSS v3. It is responsive.

List

Author Leon Bachmann

11.3k

13

Fork Fullscreen

<div class="mt-2 relative z-10">
    <ul
        class="mt-8 mx-auto max-w-xs text-left font-medium text-lg leading-none border-blue-200 divide-y divide-blue-200">
        <li>
            <a class="py-3.5 w-full flex items-center text-blue-500 hover:text-blue-700 hover:bg-blue-50" href="#">
                <span class="ml-5 mr-2.5 w-1 h-7 bg-blue-500 rounded-r-md"></span>
                Cypress
            </a>
        </li>
        <li>
            <a class="py-3.5 w-full flex items-center text-blue-500 hover:text-blue-700 hover:bg-blue-50" href="#">
                <span class="ml-5 mr-2.5 w-1 h-7 bg-blue-500 rounded-r-md"></span>
                Go
            </a>
        </li>
        <li>
            <a class="py-3.5 w-full flex items-center text-blue-500 hover:text-blue-700 hover:bg-blue-50" href="#">
                <span class="ml-5 mr-2.5 w-1 h-7 bg-blue-500 rounded-r-md"></span>
                <p>
                    Jest
                    <span class="font-normal text-gray-500 text-sm">(JavaScript)</span>
                </p>
            </a>
        </li>
        <li>
            <a class="py-3.5 w-full flex items-center text-blue-500 hover:text-blue-700 hover:bg-blue-50" href="#">
                <span class="ml-5 mr-2.5 w-1 h-7 bg-blue-500 rounded-r-md"></span>
                <p>
                    JUnit
                    <span class="font-normal text-gray-500 text-sm">(Java)</span>
                </p>
            </a>
        </li>
        <li>
            <a class="py-3.5 w-full flex items-center text-blue-500 hover:text-blue-700 hover:bg-blue-50" href="#">
                <span class="ml-5 mr-2.5 w-1 h-7 bg-blue-500 rounded-r-md"></span>
                <p>
                    minitest
                    <span class="font-normal text-gray-500 text-sm">(Ruby)</span>
                </p>
            </a>
        </li>
        <li>
            <a class="py-3.5 w-full flex items-center text-blue-500 hover:text-blue-700 hover:bg-blue-50" href="#">
                <span class="ml-5 mr-2.5 w-1 h-7 bg-blue-500 rounded-r-md"></span>
                <p>
                    Mocha
                    <span class="font-normal text-gray-500 text-sm">(JavaScript)</span>
                </p>
            </a>
        </li>

</ul>

</div>

Related Examples

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

Author:
Noob

3 years ago

21.4k
List of links

Author:
Prajwal Hallale

3 years ago

10.3k
Responsive list with 3 columns

Author:
TailwindFlex

3 years ago

13.7k
Features list

Author:
Leon Bachmann

3 years ago

11.1k
Users ranking list with points

Author:
Leif99

3 years ago

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

Author:
Mr Robot

3 years ago

11k
Projects List

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

1 year ago

1.8k
Item List with title
created by using fieldset and legend tags

Author:
Prashant

3 years ago

11.5k
List example

Author:
Isabella Kowalski

3 years ago

14.4k
Responsive list

Author:
Sienna

3 years ago

12.4k
todo list with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2k
Todo list in tailwlind

Author:
Kofi Osei

3 years ago

17.3k

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

© 2026 TailwindFlex. All Rights Reserved.

v1.12