Document index page list

This tailwind example is contributed by sql_guru, on 03-Jun-2023. Component is made with Tailwind v3.4. It is responsive.

List

Author sql_guru

Tailwind v3.4 13.1k 10

Fork Fullscreen

<div class="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">
    <div class="flex flex-col space-y-3 bg-teal-600 p-4 max-w-md mx-auto w-full rounded-lg">
      
        <div class="flex items-center justify-between space-x-2">
            <span class="flex-shrink-0 text-lg text-white">Introduction</span>
            <span class="border-b-4 border-dotted border-teal-200 flex-grow"></span>
            <span class="flex-shrink-0 text-lg text-white font-mono">6.1</span>
        </div>
        
        <div class="flex items-center justify-between space-x-2">
            <span class="flex-shrink-0 text-lg text-white">Naming is hard</span>
            <span class="border-b-4 border-dotted border-teal-200 flex-grow"></span>
            <span class="flex-shrink-0 text-lg text-white font-mono">6.2</span>
        </div>

<div class="flex items-center justify-between space-x-2">
            <span class="flex-shrink-0 text-lg text-white">Trees</span>
            <span class="border-b-4 border-dotted border-teal-200 flex-grow"></span>
            <span class="flex-shrink-0 text-lg text-white font-mono">6.3</span>
        </div>

<div class="flex items-center justify-between space-x-2">
            <span class="flex-shrink-0 text-lg text-white">In closing</span>
            <span class="border-b-4 border-dotted border-teal-200 flex-grow"></span>
            <span class="flex-shrink-0 text-lg text-white font-mono">6.5</span>
        </div>
        
    </div>
</div>

Related Examples

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

Noob

4 years ago

21.7k
Users ranking list

Leif99

3 years ago

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

5 months ago

604
Responsive list with icons

Prajwal Hallale

3 years ago

10.6k
Item List

Amit Pachange

4 years ago

10.8k
ToDo

Im_angeo

4 months ago

505
Responsive list with 3 columns

TailwindFlex

3 years ago

14.3k
Features list with heading

Leon Bachmann

3 years ago

12.1k
List of links

Prajwal Hallale

3 years ago

10.3k
Hierarchy list

Anonymous

3 years ago

11.5k
Services list

ariaw

11 months ago

599
Todo list template

Steven Kuhn

3 years ago

19.5k