Componente de tabla de contenido

<div class="p-8 bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-800 dark:to-gray-950 min-h-screen font-sans">

  <!-- Skeuomorphic Container for Table of Contents -->
  <div class="max-w-3xl mx-auto bg-gradient-to-br from-gray-300 to-gray-500 dark:from-gray-700 dark:to-gray-900 rounded-3xl shadow-[inset_0_4px_8px_rgba(0,0,0,0.1),inset_0_-4px_8px_rgba(255,255,255,0.7),0_10px_20px_rgba(0,0,0,0.2)] dark:shadow-[inset_0_4px_8px_rgba(255,255,255,0.1),inset_0_-4px_8px_rgba(0,0,0,0.5),0_10px_20px_rgba(0,0,0,0.4)] p-8 md:p-12 border-t border-l border-gray-400 dark:border-gray-600">

    <h1 class="text-4xl md:text-5xl font-extrabold text-gray-800 dark:text-gray-100 mb-8 text-center drop-shadow-md">
      <span class="bg-clip-text text-transparent bg-gradient-to-r from-red-600 via-blue-600 to-green-600 dark:from-red-400 dark:via-blue-400 dark:to-green-400">Table of Contents</span>
    </h1>

    <!-- Search Bar with Skeuomorphic Input -->
    <div class="mb-8 relative">
      <input type="text" placeholder="Search topics..." class="w-full py-3 pl-12 pr-6 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 text-lg shadow-[inset_0_2px_4px_rgba(0,0,0,0.1),0_1px_0_rgba(255,255,255,0.8)] dark:shadow-[inset_0_2px_4px_rgba(255,255,255,0.1),0_1px_0_rgba(0,0,0,0.5)] focus:outline-none focus:ring-4 focus:ring-red-400 dark:focus:ring-red-600 transition duration-300">
      <svg class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500 w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
    </div>

    <!-- Table of Contents List -->
    <ul class="space-y-4 md:space-y-6">

      <!-- Section 1 -->
      <li class="relative group">
        <a href="#section1" class="block w-full py-4 px-6 rounded-2xl bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 text-gray-800 dark:text-gray-200 text-xl font-semibold shadow-[0_4px_8px_rgba(0,0,0,0.1),inset_0_-2px_4px_rgba(0,0,0,0.1)] dark:shadow-[0_4px_8px_rgba(0,0,0,0.3),inset_0_-2px_4px_rgba(255,255,255,0.1)] hover:shadow-[0_6px_12px_rgba(0,0,0,0.2),inset_0_-3px_6px_rgba(0,0,0,0.15)] dark:hover:shadow-[0_6px_12px_rgba(0,0,0,0.4),inset_0_-3px_6px_rgba(255,255,255,0.15)] transition-all duration-300 transform hover:-translate-y-1 border-t border-l border-gray-100 dark:border-gray-700
        flex items-center justify-between">
          <span>1. Introduction to Social Media</span>
          <svg class="w-6 h-6 text-red-500 dark:text-red-400 transform group-hover:rotate-90 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
        </a>
        <!-- Nested Sub-sections -->
        <ul class="ml-8 mt-3 space-y-2 border-l-4 border-red-500 dark:border-red-600 pl-4 py-2 opacity-0 max-h-0 group-hover:opacity-100 group-hover:max-h-screen transition-all duration-500 ease-in-out overflow-hidden">
          <li><a href="#section1.1" class="block py-2 text-gray-700 dark:text-gray-300 hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200 text-lg relative before:content-['-'] before:absolute before:-left-4 before:text-red-500 dark:before:text-red-400">1.1 What is Social Media?</a></li>
          <li><a href="#section1.2" class="block py-2 text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200 text-lg relative before:content-['-'] before:absolute before:-left-4 before:text-blue-500 dark:before:text-blue-400">1.2 History and Evolution</a></li>
        </ul>
      </li>

      <!-- Section 2 -->
      <li class="relative group">
        <a href="#section2" class="block w-full py-4 px-6 rounded-2xl bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 text-gray-800 dark:text-gray-200 text-xl font-semibold shadow-[0_4px_8px_rgba(0,0,0,0.1),inset_0_-2px_4px_rgba(0,0,0,0.1)] dark:shadow-[0_4px_8px_rgba(0,0,0,0.3),inset_0_-2px_4px_rgba(255,255,255,0.1)] hover:shadow-[0_6px_12px_rgba(0,0,0,0.2),inset_0_-3px_6px_rgba(0,0,0,0.15)] dark:hover:shadow-[0_6px_12px_rgba(0,0,0,0.4),inset_0_-3px_6px_rgba(255,255,255,0.15)] transition-all duration-300 transform hover:-translate-y-1 border-t border-l border-gray-100 dark:border-gray-700
        flex items-center justify-between">
          <span>2. Key Social Media Platforms</span>
          <svg class="w-6 h-6 text-blue-500 dark:text-blue-400 transform group-hover:rotate-90 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
        </a>
        <!-- Nested Sub-sections -->
        <ul class="ml-8 mt-3 space-y-2 border-l-4 border-blue-500 dark:border-blue-600 pl-4 py-2 opacity-0 max-h-0 group-hover:opacity-100 group-hover:max-h-screen transition-all duration-500 ease-in-out overflow-hidden">
          <li><a href="#section2.1" class="block py-2 text-gray-700 dark:text-gray-300 hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200 text-lg relative before:content-['-'] before:absolute before:-left-4 before:text-red-500 dark:before:text-red-400">2.1 Facebook & Instagram</a></li>
          <li><a href="#section2.2" class="block py-2 text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200 text-lg relative before:content-['-'] before:absolute before:-left-4 before:text-blue-500 dark:before:text-blue-400">2.2 Twitter & LinkedIn</a></li>
          <li><a href="#section2.3" class="block py-2 text-gray-700 dark:text-gray-300 hover:text-green-500 dark:hover:text-green-400 transition-colors duration-200 text-lg relative before:content-['-'] before:absolute before:-left-4 before:text-green-500 dark:before:text-green-400">2.3 TikTok & Snapchat</a></li>
        </ul>
      </li>

      <!-- Section 3 -->
      <li class="relative group">
        <a href="#section3" class="block w-full py-4 px-6 rounded-2xl bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 text-gray-800 dark:text-gray-200 text-xl font-semibold shadow-[0_4px_8px_rgba(0,0,0,0.1),inset_0_-2px_4px_rgba(0,0,0,0.1)] dark:shadow-[0_4px_8px_rgba(0,0,0,0.3),inset_0_-2px_4px_rgba(255,255,255,0.1)] hover:shadow-[0_6px_12px_rgba(0,0,0,0.2),inset_0_-3px_6px_rgba(0,0,0,0.15)] dark:hover:shadow-[0_6px_12px_rgba(0,0,0,0.4),inset_0_-3px_6px_rgba(255,255,255,0.15)] transition-all duration-300 transform hover:-translate-y-1 border-t border-l border-gray-100 dark:border-gray-700
        flex items-center justify-between">
          <span>3. Social Media Strategy</span>
          <svg class="w-6 h-6 text-green-500 dark:text-green-400 transform group-hover:rotate-90 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
        </a>
        <!-- Nested Sub-sections -->
        <ul class="ml-8 mt-3 space-y-2 border-l-4 border-green-500 dark:border-green-600 pl-4 py-2 opacity-0 max-h-0 group-hover:opacity-100 group-hover:max-h-screen transition-all duration-500 ease-in-out overflow-hidden">
          <li><a href="#section3.1" class="block py-2 text-gray-700 dark:text-gray-300 hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200 text-lg relative before:content-['-'] before:absolute before:-left-4 before:text-red-500 dark:before:text-red-400">3.1 Content Creation</a></li>
          <li><a href="#section3.2" class="block py-2 text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200 text-lg relative before:content-['-'] before:absolute before:-left-4 before:text-blue-500 dark:before:text-blue-400">3.2 Audience Engagement</a></li>
          <li><a href="#section3.3" class="block py-2 text-gray-700 dark:text-gray-300 hover:text-green-500 dark:hover:text-green-400 transition-colors duration-200 text-lg relative before:content-['-'] before:absolute before:-left-4 before:text-green-500 dark:before:text-green-400">3.3 Analytics & KPIs</a></li>
        </ul>
      </li>

      <!-- Section 4 -->
      <li class="relative group">
        <a href="#section4" class="block w-full py-4 px-6 rounded-2xl bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 text-gray-800 dark:text-gray-200 text-xl font-semibold shadow-[0_4px_8px_rgba(0,0,0,0.1),inset_0_-2px_4px_rgba(0,0,0,0.1)] dark:shadow-[0_4px_8px_rgba(0,0,0,0.3),inset_0_-2px_4px_rgba(255,255,255,0.1)] hover:shadow-[0_6px_12px_rgba(0,0,0,0.2),inset_0_-3px_6px_rgba(0,0,0,0.15)] dark:hover:shadow-[0_6px_12px_rgba(0,0,0,0.4),inset_0_-3px_6px_rgba(255,255,255,0.15)] transition-all duration-300 transform hover:-translate-y-1 border-t border-l border-gray-100 dark:border-gray-700
        flex items-center justify-between">
          <span>4. Future of Social Media</span>
          <svg class="w-6 h-6 text-red-500 dark:text-red-400 transform group-hover:rotate-90 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
        </a>
        <!-- Nested Sub-sections -->
        <ul class="ml-8 mt-3 space-y-2 border-l-4 border-red-500 dark:border-red-600 pl-4 py-2 opacity-0 max-h-0 group-hover:opacity-100 group-hover:max-h-screen transition-all duration-500 ease-in-out overflow-hidden">
          <li><a href="#section4.1" class="block py-2 text-gray-700 dark:text-gray-300 hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200 text-lg relative before:content-['-'] before:absolute before:-left-4 before:text-red-500 dark:before:text-red-400">4.1 Emerging Trends</a></li>
          <li><a href="#section4.2" class="block py-2 text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200 text-lg relative before:content-['-'] before:absolute before:-left-4 before:text-blue-500 dark:before:text-blue-400">4.2 Metaverse & Web3</a></li>
        </ul>
      </li>

    </ul>

    <!-- Decorative elements mimicking physical buttons -->
    <div class="mt-12 flex justify-center space-x-6">
      <button class="py-3 px-8 rounded-full bg-gradient-to-br from-red-500 to-red-700 dark:from-red-700 dark:to-red-900 text-white font-bold text-lg shadow-[0_4px_8px_rgba(0,0,0,0.2),inset_0_-2px_4px_rgba(0,0,0,0.2)] dark:shadow-[0_4px_8px_rgba(0,0,0,0.4),inset_0_-2px_4px_rgba(255,255,255,0.1)] hover:to-red-800 dark:hover:to-red-950 transition-all duration-300 transform hover:scale-105 active:scale-95 border-t border-l border-red-400 dark:border-red-600">
        <span class="drop-shadow-md">Previous Chapter</span>
      </button>
      <button class="py-3 px-8 rounded-full bg-gradient-to-br from-green-500 to-green-700 dark:from-green-700 dark:to-green-900 text-white font-bold text-lg shadow-[0_4px_8px_rgba(0,0,0,0.2),inset_0_-2px_4px_rgba(0,0,0,0.2)] dark:shadow-[0_4px_8px_rgba(0,0,0,0.4),inset_0_-2px_4px_rgba(255,255,255,0.1)] hover:to-green-800 dark:hover:to-green-950 transition-all duration-300 transform hover:scale-105 active:scale-95 border-t border-l border-green-400 dark:border-green-600">
        <span class="drop-shadow-md">Next Chapter</span>
      </button>
    </div>

    <!-- Social Share Buttons mimicking embossed elements -->
    <div class="mt-12 pt-8 border-t border-gray-300 dark:border-gray-700 text-center">
      <p class="text-gray-700 dark:text-gray-300 text-lg mb-4">Share this Table of Contents:</p>
      <div class="flex justify-center space-x-4">
        <button class="w-14 h-14 rounded-full bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-800 dark:to-gray-900 shadow-[0_4px_8px_rgba(0,0,0,0.1),inset_0_2px_4px_rgba(255,255,255,0.7),inset_0_-2px_4px_rgba(0,0,0,0.15)] dark:shadow-[0_4px_8px_rgba(0,0,0,0.3),inset_0_2px_4px_rgba(0,0,0,0.5),inset_0_-2px_4px_rgba(255,255,255,0.1)] flex items-center justify-center text-blue-600 dark:text-blue-400 hover:scale-110 active:scale-90 transition-transform duration-200">
          <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 12c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-10C8.48 2 4 6.48 4 12s4.48 10 10 10 10-4.48 10-10S19.52 2 14 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
        </button>
        <button class="w-14 h-14 rounded-full bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-800 dark:to-gray-900 shadow-[0_4px_8px_rgba(0,0,0,0.1),inset_0_2px_4px_rgba(255,255,255,0.7),inset_0_-2px_4px_rgba(0,0,0,0.15)] dark:shadow-[0_4px_8px_rgba(0,0,0,0.3),inset_0_2px_4px_rgba(0,0,0,0.5),inset_0_-2px_4px_rgba(255,255,255,0.1)] flex items-center justify-center text-red-600 dark:text-red-400 hover:scale-110 active:scale-90 transition-transform duration-200">
          <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M22 6c-2.76 1.18-5.74 2-9 2-3.26 0-6.24-.82-9-2L2 8c2.76 1.18 5.74 2 9 2s6.24-.82 9-2zm0 4c-2.76 1.18-5.74 2-9 2-3.26 0-6.24-.82-9-2L2 12c2.76 1.18 5.74 2 9 2s6.24-.82 9-2zm0 4c-2.76 1.18-5.74 2-9 2-3.26 0-6.24-.82-9-2L2 16c2.76 1.18 5.74 2 9 2s6.24-.82 9-2z"/></svg>
        </button>
        <button class="w-14 h-14 rounded-full bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-800 dark:to-gray-900 shadow-[0_4px_8px_rgba(0,0,0,0.1),inset_0_2px_4px_rgba(255,255,255,0.7),inset_0_-2px_4px_rgba(0,0,0,0.15)] dark:shadow-[0_4px_8px_rgba(0,0,0,0.3),inset_0_2px_4px_rgba(0,0,0,0.5),inset_0_-2px_4px_rgba(255,255,255,0.1)] flex items-center justify-center text-green-600 dark:text-green-400 hover:scale-110 active:scale-90 transition-transform duration-200">
          <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15.5l-4-4 1.41-1.41L11 14.67l6.59-6.59L19 9.5l-8 8z"/></svg>
        </button>
      </div>
    </div>

  </div>

</div>