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 7

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>