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

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

3 years ago

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

11 months ago

1.9k
List of links

Author:
Prajwal Hallale

3 years ago

10.3k
Article List Section
A section displaying a list of articles with associated information.

Author:
Junclarkaizen Pagu

2 years ago

7.3k
User list
User list

Author:
Anonymous

9 months ago

474
About our apps UI Components
A visual collection of our most recent works - each piece crafted with intention, emotion and style.

Author:
Alif Bima Pradana

1 month ago

168
Item List

Author:
Amit Pachange

3 years ago

10.1k
Event timeline list

Author:
Laurits

3 years ago

13.7k
Feature list
list section

Author:
Gopi Yadav

3 years ago

10.7k
Logo cloud

Author:
Alok

3 years ago

10.6k
Basic list

Author:
Leon Bachmann

3 years ago

10.3k
Features list with heading

Author:
Leon Bachmann

3 years ago

11.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components