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 v3.4. It is responsive.

List

Author Anonymous

Tailwind v3.4 6.8k 6

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

Noob

4 years ago

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

Prajwal Hallale

3 years ago

20.5k
Timeline
timeline with journey

Abhiraj

1 year ago

1.6k
Responsive list with 3 columns

TailwindFlex

3 years ago

14.3k
Stacked list

Odessa Young

3 years ago

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

Alif Bima Pradana

7 months ago

864
List with highlighted text

Amit Pachange

3 years ago

10.5k
Features list with icons

L.J. Weber

3 years ago

15.2k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

5 months ago

449
Responsive list

Sienna

3 years ago

12.8k
Hierarchy list

Anonymous

3 years ago

11.5k
Projects List

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.4k