Components Table of Contents Table of Contents Component

Table of Contents Component

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

Preview

HTML Code

<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg dark:shadow-xl">
  <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Table of Contents</h2>
  <ul class="space-y-2">
    <li>
      <a href="#section1" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
        <span class="font-semibold">Section 1: Introduction</span>
      </a>
    </li>
    <li>
      <a href="#section2" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
        <span class="font-semibold">Section 2: Projects</span>
      </a>
    </li>
    <li>
      <a href="#section3" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
        <span class="font-semibold">Section 3: Skills</span>
      </a>
    </li>
    <li>
      <a href="#section4" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
        <span class="font-semibold">Section 4: Contact</span>
      </a>
    </li>
  </ul>
</div>

Related Components

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

Table of Contents Component with Microinteractions design, Analogous color scheme, Simple complexity, and Social Media purpose. Responsive with dark theme support. No JavaScript code.

Open

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