Home
Anonymous
Table of content

Table of content

Show list of Table of content

This tailwind example is contributed by Anonymous, on 28-Jan-2024. Component is made with Tailwind CSS v3. It is responsive.

List

Author Anonymous

5.7k

Fork Fullscreen

<div class="w-full bg-gray-100 px-4 py-3 text-left text-gray-800 break-words max-w-md rounded">
    <div class="mx-auto text-xl font-semibold"><strong>Table of content</strong></div>
    <ul class="mt-2 list-disc px-2 pl-6">
        <li>
            <a class="block hover:bg-gray-200 px-2 py-1 rounded" href="#introduction">Introduction</a>
        </li>
        <li>
            <a class="block hover:bg-gray-200 px-2 py-1 rounded" href="#getting-started">Getting Started with
                Bootstrap</a>
        </li>
        <li>
            <a class="block hover:bg-gray-200 px-2 py-1 rounded" href="#responsive-design">Responsive Design in
                Bootstrap</a>
        </li>
        <li>
            <a class="block hover:bg-gray-200 px-2 py-1 rounded" href="#theming-and-customization">Theming and
                Customization</a>
        </li>
        <li>
            <a class="block hover:bg-gray-200 px-2 py-1 rounded" href="#sass-maps-in-bootstrap">Sass Maps in
                Bootstrap</a>
        </li>
        <li>
            <a class="block hover:bg-gray-200 px-2 py-1 rounded" href="#best-practices">Best Practices for Bootstrap</a>
        </li>
        <li>
            <a class="block hover:bg-gray-200 px-2 py-1 rounded" href="#code-samples">Code Samples for Bootstrap</a>
        </li>
        <li>
            <a class="block hover:bg-gray-200 px-2 py-1 rounded" href="#conclusion">Conclusion</a>
        </li>
        <li>
            <a class="block hover:bg-gray-200 px-2 py-1 rounded" href="#change-theme-color">Changing Theme Color in
                Bootstrap</a>
        </li>
        <li>
            <a class="block hover:bg-gray-200 px-2 py-1 rounded" href="#using-theme-color">Using Theme Color in
                Bootstrap</a>
        </li>
        <li>
            <a class="block hover:bg-gray-200 px-2 py-1 rounded" href="#number-of-colors">Number of Colors in
                Bootstrap</a>
        </li>
        <li>
            <a class="block hover:bg-gray-200 px-2 py-1 rounded" href="#customize-theme">Customizing a Bootstrap
                Theme</a>
        </li>
    </ul>
</div>

Related Examples

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

Author:
Noob

3 years ago

20.9k
Dropdown menu list
Dropdown menu list without using javascript. This example takes advantage of native HTML's <details> and <summary> tags

Author:
Prajwal Hallale

2 years ago

20.1k
List section
Beautiful list section with left border

Author:
Leon Bachmann

2 years ago

10.7k
Document index page list

Author:
sql_guru

2 years ago

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

7 months ago

1.6k
Logo cloud

Author:
Alok

2 years ago

10.4k
Basic list

Author:
Sophia Baker

2 years ago

10.4k
Nested list

Author:
Lukas Müller

2 years ago

13.1k
Basic list

Author:
Leon Bachmann

3 years ago

10.3k
Services list

Author:
ariaw

1 month ago

23
Timeline
timeline with journey

Author:
Abhiraj

10 months ago

924
Todo list template

Author:
Steven Kuhn

2 years ago

18.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components