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 v3.4. It is responsive.

List

Author Leon Bachmann

Tailwind v3.4 12.1k 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="#">
 
 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="#">
 
 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="#">
 
 
 Jest
 (JavaScript)
 
 </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="#">
 
 
 JUnit
 (Java)
 
 </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="#">
 
 
 minitest
 (Ruby)
 
 </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="#">
 
 
 Mocha
 (JavaScript)
 
 </a>
 </li>

</ul>

</div>

Related Examples

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

Noob

4 years ago

21.8k
List of links

Prajwal Hallale

3 years ago

10.4k
Responsive list with 3 columns

TailwindFlex

3 years ago

14.3k
Features list

Leon Bachmann

3 years ago

11.5k
Responsive list with icons

Prajwal Hallale

3 years ago

10.6k
List with border

Samuel Dawson

3 years ago

11.6k
Todo list in tailwlind

Kofi Osei

3 years ago

18.2k
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/

Achraf Testq

6 months ago

628
ToDo

Im_angeo

5 months ago

520
Organization Hierarchy list

Anonymous

3 years ago

9.8k
Projects List

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.5k
Nested list

Lukas Müller

3 years ago

14.1k