Componente de tabla de contenido

<div class="p-4 md:p-8 lg:p-12 bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-950 min-h-screen flex items-center justify-center font-sans">

  <nav class="w-full max-w-sm lg:max-w-md bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform perspective-1000 rotateX-3 animate-fade-in-up transition-all duration-300 hover:shadow-2xl dark:shadow-sky-900 dark:shadow-md" style="transform-style: preserve-3d;">
    <div class="p-6 lg:p-8 bg-gradient-to-r from-purple-600 via-pink-600 to-yellow-500 dark:from-purple-800 dark:via-pink-800 dark:to-yellow-700 text-white shadow-md transform translateZ-20 relative z-10 rounded-t-3xl">
      <h2 class="text-2xl lg:text-3xl font-extrabold tracking-tight drop-shadow-lg text-center">
        Your Adventure Guide
      </h2>
      <p class="text-sm lg:text-base text-gray-100 mt-1 opacity-90 text-center">
        Jump to your next destination.
      </p>
    </div>

    <ul class="p-6 lg:p-8 space-y-4 lg:space-y-5 relative z-0 before:absolute before:left-10 before:top-0 before:bottom-0 before:w-1 before:bg-gradient-to-b before:from-purple-300 before:via-pink-300 before:to-yellow-300 dark:before:from-purple-700 dark:before:via-pink-700 dark:before:to-yellow-600 before:rounded-full before:shadow-inner">

      <li class="relative group">
        <a href="#overview" class="block p-4 rounded-xl transform perspective-600 transition-all duration-300 bg-white dark:bg-gray-700 hover:bg-purple-50 dark:hover:bg-gray-600 shadow-md group-hover:shadow-lg group-hover:-translate-y-1 group-hover:translateZ-10 group-hover:rotateX-2 hover:scale-[1.01] flex items-center">
          <span class="relative z-10 w-9 h-9 lg:w-10 lg:h-10 flex-shrink-0 bg-purple-500 dark:bg-purple-600 text-white rounded-full flex items-center justify-center font-bold text-lg lg:text-xl transform -translate-x-10 group-hover:translate-x-0 transition-transform duration-300 shadow-lg group-hover:shadow-xl">
            1
          </span>
          <div class="ml-4 text-gray-800 dark:text-gray-100 flex-grow">
            <h3 class="font-semibold text-lg lg:text-xl">Overview</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm lg:text-base">Explore the highlights.</p>
          </div>
          <svg class="w-6 h-6 lg:w-7 lg:h-7 text-purple-400 dark:text-purple-300 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors" 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>
      </li>

      <li class="relative group">
        <a href="#destinations" class="block p-4 rounded-xl transform perspective-600 transition-all duration-300 bg-white dark:bg-gray-700 hover:bg-pink-50 dark:hover:bg-gray-600 shadow-md group-hover:shadow-lg group-hover:-translate-y-1 group-hover:translateZ-10 group-hover:rotateX-2 hover:scale-[1.01] flex items-center">
          <span class="relative z-10 w-9 h-9 lg:w-10 lg:h-10 flex-shrink-0 bg-pink-500 dark:bg-pink-600 text-white rounded-full flex items-center justify-center font-bold text-lg lg:text-xl transform -translate-x-10 group-hover:translate-x-0 transition-transform duration-300 shadow-lg group-hover:shadow-xl">
            2
          </span>
          <div class="ml-4 text-gray-800 dark:text-gray-100 flex-grow">
            <h3 class="font-semibold text-lg lg:text-xl">Top Destinations</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm lg:text-base">Find your next journey.</p>
          </div>
          <svg class="w-6 h-6 lg:w-7 lg:h-7 text-pink-400 dark:text-pink-300 group-hover:text-pink-600 dark:group-hover:text-pink-400 transition-colors" 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>
      </li>

      <li class="relative group">
        <a href="#activities" class="block p-4 rounded-xl transform perspective-600 transition-all duration-300 bg-white dark:bg-gray-700 hover:bg-yellow-50 dark:hover:bg-gray-600 shadow-md group-hover:shadow-lg group-hover:-translate-y-1 group-hover:translateZ-10 group-hover:rotateX-2 hover:scale-[1.01] flex items-center">
          <span class="relative z-10 w-9 h-9 lg:w-10 lg:h-10 flex-shrink-0 bg-yellow-500 dark:bg-yellow-600 text-white rounded-full flex items-center justify-center font-bold text-lg lg:text-xl transform -translate-x-10 group-hover:translate-x-0 transition-transform duration-300 shadow-lg group-hover:shadow-xl">
            3
          </span>
          <div class="ml-4 text-gray-800 dark:text-gray-100 flex-grow">
            <h3 class="font-semibold text-lg lg:text-xl">Activities Guide</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm lg:text-base">Fun things to do.</p>
          </div>
          <svg class="w-6 h-6 lg:w-7 lg:h-7 text-yellow-400 dark:text-yellow-300 group-hover:text-yellow-600 dark:group-hover:text-yellow-400 transition-colors" 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>
      </li>

      <li class="relative group">
        <a href="#booking" class="block p-4 rounded-xl transform perspective-600 transition-all duration-300 bg-white dark:bg-gray-700 hover:bg-purple-50 dark:hover:bg-gray-600 shadow-md group-hover:shadow-lg group-hover:-translate-y-1 group-hover:translateZ-10 group-hover:rotateX-2 hover:scale-[1.01] flex items-center">
          <span class="relative z-10 w-9 h-9 lg:w-10 lg:h-10 flex-shrink-0 bg-purple-500 dark:bg-purple-600 text-white rounded-full flex items-center justify-center font-bold text-lg lg:text-xl transform -translate-x-10 group-hover:translate-x-0 transition-transform duration-300 shadow-lg group-hover:shadow-xl">
            4
          </span>
          <div class="ml-4 text-gray-800 dark:text-gray-100 flex-grow">
            <h3 class="font-semibold text-lg lg:text-xl">Booking Info</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm lg:text-base">Plan your trip.</p>
          </div>
          <svg class="w-6 h-6 lg:w-7 lg:h-7 text-purple-400 dark:text-purple-300 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors" 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>
      </li>

    </ul>

    <div class="p-6 lg:p-8 bg-gradient-to-r from-purple-600 via-pink-600 to-yellow-500 dark:from-purple-800 dark:via-pink-800 dark:to-yellow-700 text-white text-center text-sm lg:text-base rounded-b-3xl transform translateZ-20 relative z-10 shadow-inner mt-4">
      <p>Start your incredible journey today!</p>
    </div>
  </nav>

  <style>
    /* Custom 3D-like transformations (simulated using Tailwind's transform utilities) */
    .perspective-1000 { perspective: 1000px; }
    .rotateX-3 { transform: rotateX(3deg); }
    .perspective-600 { perspective: 600px; }
    .translateZ-10 { transform: translateZ(10px); }
    .translateZ-20 { transform: translateZ(20px); }
    .rotateX-2 { transform: rotateX(2deg); }

    /* Keyframe animation for initial fade-in and subtle 3D lift */
    @keyframes fade-in-up {
      from {
        opacity: 0;
        transform: translateY(20px) rotateX(10deg) scale(0.95);
      }
      to {
        opacity: 1;
        transform: translateY(0) rotateX(3deg) scale(1);
      }
    }

    .animate-fade-in-up {
      animation: fade-in-up 0.8s ease-out forwards;
    }

    /* Ensure smooth transitions for transform properties */
    .transform {
      transition-property: transform, background-color, box-shadow, color;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transition-duration: 300ms;
    }
  </style>
</div>