Components Table of Contents Table of Contents Component

Table of Contents Component

A responsive Table of Contents component for social media interfaces, designed with a dark mode UI using earth tones and a simple layout. It supports dark theme using Tailwind CSS and is HTML-only with no JavaScript.

Preview

HTML Code

<nav class="p-4 bg-gray-900 text-stone-200 min-h-screen dark:bg-gray-900">
  <h2 class="text-xl font-bold mb-4 text-stone-100">Table of Contents</h2>
  <ul class="space-y-2">
    <li><a href="#section-1" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Introduction</a></li>
    <li><a href="#section-2" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Getting Started</a></li>
    <li><a href="#section-3" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">User Profiles</a></li>
    <li><a href="#section-4" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Creating Posts</a></li>
    <li><a href="#section-5" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Interacting with Content</a></li>
    <li><a href="#section-6" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Privacy Settings</a></li>
    <li><a href="#section-7" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Notifications</a></li>
    <li><a href="#section-8" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Troubleshooting</a></li>
  </ul>
</nav>

Related Components

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

Table of Contents Component

A responsive and dark mode enabled Table of Contents component with a retro/vintage color palette, suitable for dating/social platforms. It features a muted color scheme and smooth scrolling navigation.

Open

Table of Contents Component

Responsive Table of Contents component with Skeuomorphism design, Pastel color scheme, and dark mode support, suitable for portfolios.

Open