Components Table of Contents Table of Contents Component

Table of Contents Component

A responsive Table of Contents component designed with skeuomorphic elements and earth tones for a portfolio showcase, with dark mode support.

Preview

HTML Code

<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-semibold text-green-800 dark:text-green-200 mb-4">Table of Contents</h2>
    <ul class="space-y-4">
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section1" class="text-gray-800 dark:text-gray-200 font-semibold">Section 1</a>
        </li>
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section2" class="text-gray-800 dark:text-gray-200 font-semibold">Section 2</a>
        </li>
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section3" class="text-gray-800 dark:text-gray-200 font-semibold">Section 3</a>
        </li>
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section4" class="text-gray-800 dark:text-gray-200 font-semibold">Section 4</a>
        </li>
    </ul>
</div>

Related Components

A responsive Table of Contents component styled with Glassmorphism, featuring frosted glass-like translucent elements with blur effects and dark theme support. Includes sections and placeholder images for visual representation.

Open

3D Table of Contents Component

A responsive Table of Contents component designed for e-commerce, featuring 3D design elements and a complementary color scheme. It includes interactive elements and supports dark mode.

Open

Bauhaus_Retro_Photography_TOC

A complex, responsive Table of Contents component for photography websites, inspired by Bauhaus design principles and a retro/vintage color palette. Features geometric forms, muted colors, and full dark mode support, ideal for photo galleries and portfolios.

Open