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.2k 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.9k
Responsive list with 3 columns

TailwindFlex

3 years ago

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

Mr Robot

4 years ago

11.7k
MENU OMERLINKS
MENU OMERLINKS

Omer fils ELENGA

9 months ago

782
Responsive list

Sienna

3 years ago

12.8k
List example

Isabella Kowalski

3 years ago

14.9k
List component

Shru hari

2 years ago

3.7k
Game Character Cards
Simple game character cards selection

Diavox Jerome Soriano

1 year ago

1.8k
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Abdul Baset Bappy

1 year ago

2.7k
Timeline
timeline with journey

Abhiraj

1 year ago

1.6k
Logo cloud

Alok

3 years ago

11.1k
List of steps

Leif99

3 years ago

13.9k