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 skeuomorphic elements and earth tones for a portfolio showcase, with dark mode support.

Open Preview

                <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>

RetroEarthDashboardTOC

Responsive Table of Contents component with Retro/Vintage design, Earth tones color scheme, and dark mode support for dashboard use.

Open Preview

                <div class="bg-stone-100 dark:bg-stone-900 text-stone-800 dark:text-stone-200 p-6 rounded-lg shadow-lg font-mono">
  <h2 class="text-xl font-bold mb-4">Table of Contents</h2>
  <ul class="space-y-2">
    <li><a href="#section-1" class="hover:underline">1. Introduction</a></li>
    <li><a href="#section-2" class="hover:underline">2. Data Overview</a></li>
    <li>
      <a href="#section-3" class="hover:underline">3. Key Metrics</a>
      <ul class="ml-4 mt-1 space-y-1">
        <li><a href="#section-3-1" class="hover:underline">3.1. Sales Performance</a></li>
        <li><a href="#section-3-2" class="hover:underline">3.2. User Engagement</a></li>
      </ul>
    </li>
    <li><a href="#section-4" class="hover:underline">4. Conclusion</a></li>
  </ul>
</div>

Retro Table of Contents

Responsive Table of Contents Component with Retro/Vintage design, Analogous color scheme, and dark mode support. Suitable for Business/Corporate websites. Uses Tailwind CSS with no JavaScript.

Open Preview

                <div class="bg-gray-200 dark:bg-gray-800 retro-analogous-colors p-6 rounded-lg shadow-lg">
  <h2 class="text-xl font-bold mb-4 dark:text-white">Table of Contents</h2>
  <ul class="space-y-2">
    <li><a href="#section-1" class="text-blue-800 dark:text-blue-300 hover:underline">Section 1: Introduction</a></li>
    <li><a href="#section-2" class="text-blue-800 dark:text-blue-300 hover:underline">Section 2: Getting Started</a></li>
    <li><a href="#section-3" class="text-blue-800 dark:text-blue-300 hover:underline">Section 3: Core Concepts</a></li>
    <li><a href="#section-4" class="text-blue-800 dark:text-blue-300 hover:underline">Section 4: Advanced Topics</a></li>
    <li><a href="#section-5" class="text-blue-800 dark:text-blue-300 hover:underline">Section 5: Conclusion</a></li>
  </ul>
</div>

<style>
  .retro-analogous-colors {
    /* Define your retro analogous colors here using Tailwind's custom colors or by extending the theme */
    /* Example (you would define these in your tailwind.config.js): */
    /* background-color: theme('colors.retro-light'); */
    /* color: theme('colors.retro-dark'); */
  }

  .dark .retro-analogous-colors {
     /* background-color: theme('colors.retro-dark'); */
     /* color: theme('colors.retro-light'); */
  }
</style>

Table of Contents Component

A responsive Table of Contents component with a glassmorphism design and pastel color scheme, suitable for dashboards with data visualization and control panels.

Open Preview

                <div class="flex flex-col items-center p-5 bg-white rounded-lg shadow-lg glassmorphism dark:bg-gray-800">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Table of Contents</h2>
    <ul class="w-full space-y-3">
        <li class="p-4 rounded-lg bg-white text-gray-700 shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-700 dark:text-gray-200"> 
            <a href="#section1">Section 1</a>
        </li>
        <li class="p-4 rounded-lg bg-white text-gray-700 shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-700 dark:text-gray-200">
            <a href="#section2">Section 2</a>
        </li>
        <li class="p-4 rounded-lg bg-white text-gray-700 shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-700 dark:text-gray-200">
            <a href="#section3">Section 3</a>
        </li>
        <li class="p-4 rounded-lg bg-white text-gray-700 shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-700 dark:text-gray-200">
            <a href="#section4">Section 4</a>
        </li>
        <li class="p-4 rounded-lg bg-white text-gray-700 shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-700 dark:text-gray-200">
            <a href="#section5">Section 5</a>
        </li>
    </ul>
    <div class="mt-6 w-full">
        <img src="https://picsum.photos/300/200" alt="Sample Image" class="w-full h-auto rounded-lg shadow-lg">
    </div>
    <div class="mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full shadow-lg">
        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">User Name</p>
    </div>
</div>

Responsive Table of Contents component with dark mode support using Tailwind CSS. The component is designed for a portfolio purpose, featuring a monochromatic color scheme and a moderate complexity level without JavaScript.

Open Preview

                <div class="bg-gray-900 text-gray-300 p-8 min-h-screen">
  <div class="max-w-4xl mx-auto">
    <h1 class="text-3xl font-bold text-white mb-8">Table of Contents</h1>
    <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
      <ul class="space-y-4">
        <li>
          <a href="#section-1" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
            <span class="font-semibold text-gray-300">Section 1:</span> Introduction
          </a>
        </li>
        <li>
          <a href="#section-2" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
            <span class="font-semibold text-gray-300">Section 2:</span> About Me
          </a>
          <ul class="ml-6 mt-2 space-y-2">
            <li>
              <a href="#section-2-1" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
                2.1 My Background
              </a>
            </li>
            <li>
              <a href="#section-2-2" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
                2.2 Skills
              </a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#section-3" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
            <span class="font-semibold text-gray-300">Section 3:</span> My Work
          </a>
          <ul class="ml-6 mt-2 space-y-2">
            <li>
              <a href="#section-3-1" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
                3.1 Project Alpha
              </a>
            </li>
            <li>
              <a href="#section-3-2" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
                3.2 Project Beta
              </a>
            </li>
            <li>
              <a href="#section-3-3" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
                3.3 Project Gamma
              </a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#section-4" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
            <span class="font-semibold text-gray-300">Section 4:</span> Contact
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

Table of Contents Component

A minimalist Table of Contents component designed with Tailwind CSS, featuring responsive effects and dark theme support.

Open Preview

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Table of Contents</h2>
    <ul class="list-disc pl-5 space-y-2">
        <li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
            <a href="#section1" class="text-gray-700 dark:text-gray-300">Section 1</a>
        </li>
        <li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
            <a href="#section2" class="text-gray-700 dark:text-gray-300">Section 2</a>
        </li>
        <li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
            <a href="#section3" class="text-gray-700 dark:text-gray-300">Section 3</a>
        </li>
        <li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
            <a href="#section4" class="text-gray-700 dark:text-gray-300">Section 4</a>
        </li>
        <li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
            <a href="#section5" class="text-gray-700 dark:text-gray-300">Section 5</a>
        </li>
    </ul>
</div>

<div class="mt-8 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h3 id="section1" class="text-xl font-semibold text-gray-800 dark:text-white">Section 1</h3>
    <p class="text-gray-700 dark:text-gray-300">Content for section 1. <img src="https://picsum.photos/200/100" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>
<div class="mt-4 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h3 id="section2" class="text-xl font-semibold text-gray-800 dark:text-white">Section 2</h3>
    <p class="text-gray-700 dark:text-gray-300">Content for section 2. <img src="https://picsum.photos/200/100?random=1" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>
<div class="mt-4 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h3 id="section3" class="text-xl font-semibold text-gray-800 dark:text-white">Section 3</h3>
    <p class="text-gray-700 dark:text-gray-300">Content for section 3. <img src="https://picsum.photos/200/100?random=2" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>
<div class="mt-4 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h3 id="section4" class="text-xl font-semibold text-gray-800 dark:text-white">Section 4</h3>
    <p class="text-gray-700 dark:text-gray-300">Content for section 4. <img src="https://picsum.photos/200/100?random=3" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>
<div class="mt-4 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h3 id="section5" class="text-xl font-semibold text-gray-800 dark:text-white">Section 5</h3>
    <p class="text-gray-700 dark:text-gray-300">Content for section 5. <img src="https://picsum.photos/200/100?random=4" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>

Table of Contents Component

A responsive Table of Contents component designed for dark mode, featuring sections with titles and placeholders for images and avatars.

Open Preview

                <div class="bg-gray-900 text-white min-h-screen p-5">
    <h1 class="text-3xl font-bold mb-4">Table of Contents</h1>
    <ul class="space-y-4">
        <li class="bg-gray-800 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-200">
            <div class="flex items-center">
                <img src="https://picsum.photos/50" alt="Placeholder Image" class="rounded-full mr-3">
                <h2 class="text-xl font-semibold">Section 1</h2>
            </div>
            <p class="mt-2 text-gray-400">Description for section 1 goes here. It can contain an overview or an introduction.</p>
        </li>
        <li class="bg-gray-800 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-200">
            <div class="flex items-center">
                <img src="https://picsum.photos/50" alt="Placeholder Image" class="rounded-full mr-3">
                <h2 class="text-xl font-semibold">Section 2</h2>
            </div>
            <p class="mt-2 text-gray-400">Description for section 2 goes here. It can contain an overview or an introduction.</p>
        </li>
        <li class="bg-gray-800 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-200">
            <div class="flex items-center">
                <img src="https://picsum.photos/50" alt="Placeholder Image" class="rounded-full mr-3">
                <h2 class="text-xl font-semibold">Section 3</h2>
            </div>
            <p class="mt-2 text-gray-400">Description for section 3 goes here. It can contain an overview or an introduction.</p>
        </li>
        <li class="bg-gray-800 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-200">
            <div class="flex items-center">
                <img src="https://picsum.photos/50" alt="Placeholder Image" class="rounded-full mr-3">
                <h2 class="text-xl font-semibold">Section 4</h2>
            </div>
            <p class="mt-2 text-gray-400">Description for section 4 goes here. It can contain an overview or an introduction.</p>
        </li>
    </ul>
</div>

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 Preview

                <div class="bg-white bg-opacity-30 backdrop-blur-md shadow-lg rounded-lg p-6">
    <h2 class="text-2xl font-bold mb-4">Table of Contents</h2>
    <ul class="space-y-3">
        <li class="p-4 bg-white bg-opacity-20 backdrop-blur-md rounded-lg hover:bg-opacity-30 transition duration-200">
            <a href="#section1" class="text-gray-900 dark:text-white">Introduction</a>
        </li>
        <li class="p-4 bg-white bg-opacity-20 backdrop-blur-md rounded-lg hover:bg-opacity-30 transition duration-200">
            <a href="#section2" class="text-gray-900 dark:text-white">Features</a>
        </li>
        <li class="p-4 bg-white bg-opacity-20 backdrop-blur-md rounded-lg hover:bg-opacity-30 transition duration-200">
            <a href="#section3" class="text-gray-900 dark:text-white">Installation</a>
        </li>
        <li class="p-4 bg-white bg-opacity-20 backdrop-blur-md rounded-lg hover:bg-opacity-30 transition duration-200">
            <a href="#section4" class="text-gray-900 dark:text-white">Usage</a>
        </li>
        <li class="p-4 bg-white bg-opacity-20 backdrop-blur-md rounded-lg hover:bg-opacity-30 transition duration-200">
            <a href="#section5" class="text-gray-900 dark:text-white">Conclusion</a>
        </li>
    </ul>
    <div class="mt-6">
        <img src="https://picsum.photos/400/200?random=1" alt="Placeholder Image" class="w-full h-auto rounded-lg">
        <div class="flex items-center mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
            <span class="ml-3 text-gray-700 dark:text-gray-300">User Name</span>
        </div>
    </div>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        .bg-white {
            background-color: rgba(255, 255, 255, 0.1);
        }
        .text-gray-900 {
            color: white;
        }
        .text-gray-700 {
            color: #e0e0e0;
        }
    }
</style>

Table of Contents Component

A responsive Table of Contents Component styled with Neumorphism using Tailwind CSS, featuring dark theme support and showing placeholder images and avatars.

Open Preview

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-md space-y-4">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Table of Contents</h2>
    <ul class="space-y-2">
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <div class="flex items-center space-x-3">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
                <a href="#section1" class="text-lg text-gray-800 dark:text-gray-200">Section 1</a>
            </div>
        </li>
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <div class="flex items-center space-x-3">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
                <a href="#section2" class="text-lg text-gray-800 dark:text-gray-200">Section 2</a>
            </div>
        </li>
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <div class="flex items-center space-x-3">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
                <a href="#section3" class="text-lg text-gray-800 dark:text-gray-200">Section 3</a>
            </div>
        </li>
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <div class="flex items-center space-x-3">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
                <a href="#section4" class="text-lg text-gray-800 dark:text-gray-200">Section 4</a>
            </div>
        </li>
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <div class="flex items-center space-x-3">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
                <a href="#section5" class="text-lg text-gray-800 dark:text-gray-200">Section 5</a>
            </div>
        </li>
    </ul>
</div>

Table of Contents Component

A responsive Table of Contents component styled with Material Design principles using Tailwind CSS, supporting dark mode and featuring placeholder images and avatars.

Open Preview

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Table of Contents</h2>
    <ul class="space-y-2">
        <li class="p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition ease-in-out duration-150">
            <div class="flex items-center">
                <img src="https://picsum.photos/40/40?random=1" alt="Avatar 1" class="rounded-full mr-3">
                <a href="#section1" class="text-gray-700 dark:text-gray-200 hover:underline">Section 1: Introduction</a>
            </div>
        </li>
        <li class="p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition ease-in-out duration-150">
            <div class="flex items-center">
                <img src="https://picsum.photos/40/40?random=2" alt="Avatar 2" class="rounded-full mr-3">
                <a href="#section2" class="text-gray-700 dark:text-gray-200 hover:underline">Section 2: Getting Started</a>
            </div>
        </li>
        <li class="p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition ease-in-out duration-150">
            <div class="flex items-center">
                <img src="https://picsum.photos/40/40?random=3" alt="Avatar 3" class="rounded-full mr-3">
                <a href="#section3" class="text-gray-700 dark:text-gray-200 hover:underline">Section 3: Features</a>
            </div>
        </li>
        <li class="p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition ease-in-out duration-150">
            <div class="flex items-center">
                <img src="https://picsum.photos/40/40?random=4" alt="Avatar 4" class="rounded-full mr-3">
                <a href="#section4" class="text-gray-700 dark:text-gray-200 hover:underline">Section 4: Conclusion</a>
            </div>
        </li>
    </ul>
</div>