Table of Contents | Code Components Hub

Search Components

Categories

Components Table of Contents

Navigational aid for long content pages

Table of Contents Component

A responsive Table of Contents Component designed with Glassmorphism style, featuring frosted glass-like translucent elements with blur effects, supporting both light and dark themes with Tailwind CSS.

Open Preview

                <div class="bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-60 backdrop-blur-lg border border-gray-300 dark:border-gray-600 rounded-lg p-6 shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Table of Contents</h2>
    <ul class="mt-4 space-y-3">
        <li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
            <a href="#section1" class="text-gray-800 dark:text-white">Section 1: Introduction</a>
        </li>
        <li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
            <a href="#section2" class="text-gray-800 dark:text-white">Section 2: Features</a>
        </li>
        <li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
            <a href="#section3" class="text-gray-800 dark:text-white">Section 3: Installation</a>
        </li>
        <li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
            <a href="#section4" class="text-gray-800 dark:text-white">Section 4: Usage</a>
        </li>
        <li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
            <a href="#section5" class="text-gray-800 dark:text-white">Section 5: Conclusion</a>
        </li>
    </ul>
</div>

Table of Contents Component

A responsive Table of Contents component designed in Dark Mode UI style, featuring sections, titles, descriptions, and random images/avatars.

Open Preview

                <div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4">Table of Contents</h2>
    <ul class="space-y-3">
        <li class="hover:bg-gray-800 rounded p-2 transition duration-300">
            <h3 class="font-semibold">Section 1</h3>
            <p class="text-gray-400">Description of Section 1</p>
            <img src="https://picsum.photos/200/100?random=1" alt="Random Image" class="mt-2 rounded" />
        </li>
        <li class="hover:bg-gray-800 rounded p-2 transition duration-300">
            <h3 class="font-semibold">Section 2</h3>
            <p class="text-gray-400">Description of Section 2</p>
            <img src="https://picsum.photos/200/100?random=2" alt="Random Image" class="mt-2 rounded" />
        </li>
        <li class="hover:bg-gray-800 rounded p-2 transition duration-300">
            <h3 class="font-semibold">Section 3</h3>
            <p class="text-gray-400">Description of Section 3</p>
            <img src="https://picsum.photos/200/100?random=3" alt="Random Image" class="mt-2 rounded" />
        </li>
    </ul>
    <div class="mt-5 border-t border-gray-700 pt-4">
        <h4 class="font-semibold">Author</h4>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3" />
            <span class="text-gray-400">John Doe</span>
        </div>
    </div>
</div>

Table of Contents Component

A minimalistic and responsive Table of Contents component styled with Tailwind CSS, supporting dark mode and featuring clean design elements.

Open Preview

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 max-w-md mx-auto">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Table of Contents</h2>
    <ul class="list-inside list-disc text-gray-600 dark:text-gray-300">
        <li class="py-1"><a href="#section1" class="hover:text-blue-600 dark:hover:text-blue-400">Section 1</a></li>
        <li class="py-1"><a href="#section2" class="hover:text-blue-600 dark:hover:text-blue-400">Section 2</a></li>
        <li class="py-1"><a href="#section3" class="hover:text-blue-600 dark:hover:text-blue-400">Section 3</a></li>
        <li class="py-1"><a href="#section4" class="hover:text-blue-600 dark:hover:text-blue-400">Section 4</a></li>
        <li class="py-1"><a href="#section5" class="hover:text-blue-600 dark:hover:text-blue-400">Section 5</a></li>
    </ul>
</div>

<div class="hidden md:flex items-center justify-center mt-8">
    <img src="https://picsum.photos/150" alt="Placeholder Image" class="rounded-full border-2 border-gray-300 dark:border-gray-700">
    <span class="ml-3 text-gray-600 dark:text-gray-300">Created by: <span class="font-semibold">John Doe</span></span>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
            color: #e2e8f0;
        }
    }
</style>

Table of Contents Component 34

A responsive Table of Contents component styled with Material Design, featuring dark theme support and using Tailwind CSS.

Open Preview

                <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-md mx-auto">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Table of Contents</h2>
    <ul class="space-y-2">
        <li>
            <a href="#section1" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                Section 1
            </a>
        </li>
        <li>
            <a href="#section2" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                Section 2
            </a>
        </li>
        <li>
            <a href="#section3" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                Section 3
            </a>
        </li>
        <li>
            <a href="#section4" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                Section 4
            </a>
        </li>
        <li>
            <a href="#section5" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                Section 5
            </a>
        </li>
    </ul>
</div>