Home
sql_guru
Document index page list

Document index page list

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

List

Author sql_guru

12.3k

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

Author:
Noob

2 years ago

20.5k
Responsive list with icons

Author:
Prajwal Hallale

2 years ago

10.4k
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.

Author:
Abdul Baset Bappy

5 months ago

1.1k
Todo list template

Author:
Steven Kuhn

2 years ago

18.3k
Event timeline list

Author:
Laurits

2 years ago

13k
Table of content
Show list of Table of content

Author:
Anonymous

1 year ago

5.3k
Minimal list section

Author:
Task Master

2 years ago

8.3k
List of links

Author:
Prajwal Hallale

2 years ago

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

Author:
Prashant

3 years ago

11k
Timeline
timeline with journey

Author:
Abhiraj

7 months ago

778
Twitter like users list

Author:
Simon Scheffer

2 years ago

11.5k
Todo List with Dark theme
Todo List with Dark theme

Author:
Muzammil Riaz

3 months ago

280

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components