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.
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
Table of Contents
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.
Bauhaus Medical Table of Contents
A complex, responsive Table of Contents component for medical/healthcare applications, featuring a Bauhaus-inspired functional design with muted colors and dark mode support. Includes navigation, search, and section links.
Table of Contents Component - 3D Earth Tones
A complex 3D-inspired table of contents component for business and corporate websites, featuring earth tones and full responsiveness with dark mode support. Designed to provide depth and engagement.