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>