Componentes de búsqueda

Categorías

Componentes Tabla de contenidos

Tabla de contenidos

Ayuda a la navegación para páginas de contenido largo

Monospace_Developer_TOC

Un componente de tabla de contenido complejo y receptivo con una estética monoespaciada/de desarrollador, esquema de color en tono joya, optimizado para sitios de documentación y base de conocimientos, con soporte para modo oscuro.

Abrir Vista previa

                <div class="font-mono bg-stone-50 text-gray-800 dark:bg-stone-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8 rounded-lg shadow-xl border border-stone-200 dark:border-stone-800 transition-colors duration-300">
  <h2 class="text-xl sm:text-2xl font-bold mb-4 border-b-2 border-emerald-600 pb-2 text-emerald-700 dark:text-emerald-500 flex items-center">
    <svg class="w-6 h-6 mr-2 text-emerald-500" 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 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
    </svg>
    Table of Contents
  </h2>
  <nav class="">
    <ul class="space-y-2 text-sm sm:text-base">
      <li class="group">
        <a href="#section-1" class="flex items-center text-emerald-700 dark:text-emerald-500 hover:text-emerald-500 dark:hover:text-emerald-300 transition-colors duration-200 py-1.5 px-2 -ml-2 rounded-md hover:bg-emerald-100 dark:hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50">
          <span class="block w-2 h-2 rounded-full bg-emerald-600 mr-3 animate-pulse group-hover:animate-none group-hover:scale-125 transition-transform"></span>
          <span class="font-semibold">1. Introduction to Project Atlas</span>
        </a>
        <ul class="ml-6 mt-1 space-y-1 text-gray-700 dark:text-gray-300 border-l border-emerald-400 dark:border-emerald-700 pl-4">
          <li><a href="#section-1-1" class="block py-1.5 hover:text-ruby-700 dark:hover:text-ruby-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ruby-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-emerald-500">1.1. Overview and Goals</a></li>
          <li><a href="#section-1-2" class="block py-1.5 hover:text-ruby-700 dark:hover:text-ruby-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ruby-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-emerald-500">1.2. Key Features</a></li>
        </ul>
      </li>
      <li class="group">
        <a href="#section-2" class="flex items-center text-sapphire-700 dark:text-sapphire-500 hover:text-sapphire-500 dark:hover:text-sapphire-300 transition-colors duration-200 py-1.5 px-2 -ml-2 rounded-md hover:bg-sapphire-100 dark:hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-sapphire-500 focus:ring-opacity-50">
          <span class="block w-2 h-2 rounded-full bg-sapphire-600 mr-3 animate-pulse group-hover:animate-none group-hover:scale-125 transition-transform"></span>
          <span class="font-semibold">2. Getting Started</span>
        </a>
        <ul class="ml-6 mt-1 space-y-1 text-gray-700 dark:text-gray-300 border-l border-sapphire-400 dark:border-sapphire-700 pl-4">
          <li><a href="#section-2-1" class="block py-1.5 hover:text-ruby-700 dark:hover:text-ruby-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ruby-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-sapphire-500">2.1. Installation Guide</a></li>
          <li><a href="#section-2-2" class="block py-1.5 hover:text-ruby-700 dark:hover:text-ruby-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ruby-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-sapphire-500">2.2. Configuration Settings</a></li>
          <li><a href="#section-2-3" class="block py-1.5 hover:text-ruby-700 dark:hover:text-ruby-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ruby-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-sapphire-500">2.3. Running Your First Query</a></li>
        </ul>
      </li>
      <li class="group">
        <a href="#section-3" class="flex items-center text-ruby-700 dark:text-ruby-500 hover:text-ruby-500 dark:hover:text-ruby-300 transition-colors duration-200 py-1.5 px-2 -ml-2 rounded-md hover:bg-ruby-100 dark:hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-ruby-500 focus:ring-opacity-50">
          <span class="block w-2 h-2 rounded-full bg-ruby-600 mr-3 animate-pulse group-hover:animate-none group-hover:scale-125 transition-transform"></span>
          <span class="font-semibold">3. Advanced Topics</span>
        </a>
        <ul class="ml-6 mt-1 space-y-1 text-gray-700 dark:text-gray-300 border-l border-ruby-400 dark:border-ruby-700 pl-4">
          <li><a href="#section-3-1" class="block py-1.5 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-ruby-500">3.1. API Reference</a></li>
          <li><a href="#section-3-2" class="block py-1.5 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-ruby-500">3.2. Performance Optimization</a></li>
          <li><a href="#section-3-3" class="block py-1.5 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-ruby-500">3.3. Extending Functionality</a></li>
          <li><a href="#section-3-4" class="block py-1.5 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-ruby-500">3.4. Troubleshooting Common Issues</a></li>
        </ul>
      </li>
      <li class="group">
        <a href="#section-4" class="flex items-center text-purple-700 dark:text-purple-500 hover:text-purple-500 dark:hover:text-purple-300 transition-colors duration-200 py-1.5 px-2 -ml-2 rounded-md hover:bg-purple-100 dark:hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">
          <span class="block w-2 h-2 rounded-full bg-purple-600 mr-3 animate-pulse group-hover:animate-none group-hover:scale-125 transition-transform"></span>
          <span class="font-semibold">4. Contributing</span>
        </a>
        <ul class="ml-6 mt-1 space-y-1 text-gray-700 dark:text-gray-300 border-l border-purple-400 dark:border-purple-700 pl-4">
          <li><a href="#section-4-1" class="block py-1.5 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-purple-500">4.1. How to Submit a Pull Request</a></li>
          <li><a href="#section-4-2" class="block py-1.5 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-purple-500">4.2. Code of Conduct</a></li>
        </ul>
      </li>
      <li class="group">
        <a href="#section-5" class="flex items-center text-teal-700 dark:text-teal-500 hover:text-teal-500 dark:hover:text-teal-300 transition-colors duration-200 py-1.5 px-2 -ml-2 rounded-md hover:bg-purple-100 dark:hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-opacity-50">
          <span class="block w-2 h-2 rounded-full bg-teal-600 mr-3 animate-pulse group-hover:animate-none group-hover:scale-125 transition-transform"></span>
          <span class="font-semibold">5. Legal & Licensing</span>
        </a>
      </li>
    </ul>
  </nav>
  <div class="mt-6 pt-4 border-t-2 border-slate-300 dark:border-slate-700 text-xs text-gray-500 dark:text-gray-400 flex items-center justify-between">
    <span>Documentation Version: <span class="text-emerald-600 dark:text-emerald-400">1.0.3</span></span>
    <a href="#top" class="inline-flex items-center hover:text-gray-700 dark:hover:text-gray-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50">
      <svg class="w-4 h-4 mr-1" 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="M5 10l7-7m0 0l7 7m-7-7v18"></path>
      </svg>
      Back to Top
    </a>
  </div>
</div>

<style>
  /* Custom Tailwind colors for jewel tones */
  .text-emerald-700 { color: #047857; } /* green-700 */
  .text-emerald-500 { color: #10B981; } /* green-500 */
  .text-emerald-300 { color: #6EE7B7; } /* green-300 */
  .bg-emerald-600 { background-color: #059669; }
  .border-emerald-600 { border-color: #059669; }
  .border-emerald-400 { border-color: #34D399; }
  .hover\:bg-emerald-100:hover { background-color: #D1FAE5; }
  .focus\:ring-emerald-500:focus { --tw-ring-color: #10B981; }

  .text-sapphire-700 { color: #1D4ED8; } /* blue-700 */
  .text-sapphire-500 { color: #3B82F6; } /* blue-500 */
  .text-sapphire-300 { color: #93C5FD; } /* blue-300 */
  .bg-sapphire-600 { background-color: #2563EB; }
  .border-sapphire-400 { border-color: #60A5FA; }
  .hover\:bg-sapphire-100:hover { background-color: #DBEAFE; }
  .focus\:ring-sapphire-500:focus { --tw-ring-color: #3B82F6; }

  .text-ruby-700 { color: #B91C1C; } /* red-700 */
  .text-ruby-500 { color: #EF4444; } /* red-500 */
  .text-ruby-300 { color: #FCA5A5; } /* red-300 */
  .bg-ruby-600 { background-color: #DC2626; }
  .border-ruby-400 { border-color: #F87171; }
  .hover\:bg-ruby-100:hover { background-color: #FEE2E2; }
  .focus\:ring-ruby-500:focus { --tw-ring-color: #EF4444; }

  .text-purple-700 { color: #6D28D9; } /* violet-700 */
  .text-purple-500 { color: #8B5CF6; } /* violet-500 */
  .text-purple-300 { color: #C4B5FD; } /* violet-300 */
  .bg-purple-600 { background-color: #7C3AED; }
  .border-purple-400 { border-color: #A78BFA; }
  .hover\:bg-purple-100:hover { background-color: #EDE9FE; }
  .focus\:ring-purple-500:focus { --tw-ring-color: #8B5CF6; }

  .text-teal-700 { color: #0F766E; } /* teal-700 */
  .text-teal-500 { color: #14B8A6; } /* teal-500 */
  .text-teal-300 { color: #5EEAD4; } /* teal-300 */
  .bg-teal-600 { background-color: #0D9488; }
  .border-teal-400 { border-color: #2DD4BF; }

  /* Dark mode custom colors adjustments (optional, but good for fine-tuning) */
  .dark\:text-emerald-500 { color: #10B981; }
  .dark\:text-emerald-300 { color: #6EE7B7; }
  .dark\:border-emerald-700 { border-color: #047857; }
  .dark\:hover\:bg-stone-800:hover { background-color: #292524; }

  .dark\:text-sapphire-500 { color: #3B82F6; }
  .dark\:text-sapphire-300 { color: #93C5FD; }
  .dark\:border-sapphire-700 { border-color: #1D4ED8; }

  .dark\:text-ruby-500 { color: #EF4444; }
  .dark\:text-ruby-300 { color: #FCA5A5; }
  .dark\:border-ruby-700 { border-color: #B91C1C; }

  .dark\:text-purple-500 { color: #8B5CF6; }
  .dark\:text-purple-300 { color: #C4B5FD; }
  .dark\:border-purple-700 { border-color: #6D28D9; }
  
  .dark\:text-teal-500 { color: #14B8A6; }

  /* Animations */
  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
  }
  .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
</style>

Componente de tabla de contenido

Un componente de tabla de contenido simple, vibrante y receptivo con una sensación de diseño 3D, adecuado para sitios web de viajes / turismo, incluida la compatibilidad con el modo oscuro.

Abrir Vista previa

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

Tabla de contenidos de la Bauhaus Medical

Un componente de tabla de contenido complejo y sensible para aplicaciones médicas/sanitarias, con un diseño funcional inspirado en la Bauhaus con colores apagados y compatibilidad con el modo oscuro. Incluye enlaces de navegación, búsqueda y sección.

Abrir Vista previa

                <div class="font-sans bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100 min-h-screen p-4 sm:p-6 lg:p-8">

  <!-- Outer Container with muted primary color accents -->
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden
              border-t-4 border-l-4 border-yellow-500 dark:border-yellow-600
              md:border-t-8 md:border-l-8 md:border-yellow-500 dark:md:border-yellow-600">

    <!-- Header Section with strong geometric lines -->
    <div class="bg-blue-600 dark:bg-blue-800 text-white p-4 sm:p-6 lg:p-8
                relative overflow-hidden
                before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:bg-gradient-to-br before:from-blue-700 before:to-transparent before:opacity-20 before:z-0
                after:content-[''] after:absolute after:bottom-0 after:right-0 after:w-full after:h-full after:bg-gradient-to-tl after:from-red-600 after:to-transparent after:opacity-10 after:z-0">
      <div class="relative z-10 flex flex-col sm:flex-row items-center justify-between">
        <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-4 sm:mb-0
                   tracking-tight text-white dark:text-gray-50 flex items-center">
          <span class="block w-6 h-6 sm:w-8 sm:h-8 lg:w-10 lg:h-10 bg-red-500 dark:bg-red-600 mr-3 rounded-sm transform rotate-45"></span>
          Medical Index
        </h1>
        <div class="flex items-center space-x-3">
          <span class="text-sm italic opacity-80 hidden md:block">Last Updated: 2023-10-27</span>
          <img src="https://randomuser.me/api/portraits/men/52.jpg" alt="Admin Avatar" class="w-10 h-10 rounded-full-lg border-2 border-white dark:border-gray-300 shadow-md">
        </div>
      </div>
    </div>

    <!-- Main Content Area: Search and Navigation -->
    <div class="p-4 sm:p-6 lg:p-8 grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">

      <!-- Search and Filters Section -->
      <div class="md:col-span-1 border-r-4 border-gray-200 dark:border-gray-700 pr-0 md:pr-6 lg:pr-8 space-y-6">
        <div class="mb-4">
          <label for="search-toc" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Search Documentation</label>
          <div class="relative">
            <input type="text" id="search-toc" placeholder="Search diseases, treatments..." 
                   class="w-full p-3 pl-10 rounded-lg border-2 border-red-300 dark:border-red-600
                          bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100
                          focus:ring-blue-500 focus:border-blue-500 transition duration-200 ease-in-out
                          placeholder-gray-400 dark:placeholder-gray-500">
            <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 dark:text-gray-500" 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>
        </div>

        <!-- Filter Options with primary color toggles -->
        <div class="space-y-4">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Filters</h3>
          <div class="flex flex-wrap gap-3">
            <button class="px-4 py-2 rounded-full text-sm font-medium
                           bg-blue-100 text-blue-800 dark:bg-blue-700 dark:text-blue-100
                           hover:bg-blue-200 dark:hover:bg-blue-600 transition duration-200">All Topics</button>
            <button class="px-4 py-2 rounded-full text-sm font-medium
                           bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300
                           hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Diseases</button>
            <button class="px-4 py-2 rounded-full text-sm font-medium
                           bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300
                           hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Treatments</button>
            <button class="px-4 py-2 rounded-full text-sm font-medium
                           bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300
                           hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Protocols</button>
            <button class="px-4 py-2 rounded-full text-sm font-medium
                           bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300
                           hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Diagnostics</button>
          </div>
        </div>

        <!-- Recent Updates Section -->
        <div class="mt-6">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">Recent Updates</h3>
          <ul class="space-y-3">
            <li class="flex items-start">
              <span class="flex-shrink-0 w-2 h-2 bg-yellow-500 rounded-full mt-2 mr-2"></span>
              <a href="#" class="text-sm text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">New Guidelines for Diabetes Management</a>
            </li>
            <li class="flex items-start">
              <span class="flex-shrink-0 w-2 h-2 bg-red-500 rounded-full mt-2 mr-2"></span>
              <a href="#" class="text-sm text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Updated COVID-19 Vaccination Protocols</a>
            </li>
            <li class="flex items-start">
              <span class="flex-shrink-0 w-2 h-2 bg-gray-400 dark:bg-gray-500 rounded-full mt-2 mr-2"></span>
              <a href="#" class="text-sm text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Introduction to AI in Diagnostics</a>
            </li>
          </ul>
        </div>
      </div>

      <!-- Table of Contents Main Navigation -->
      <div class="md:col-span-2 space-y-8">

        <!-- Section 1: Core Medical Conditions -->
        <section>
          <h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4 pb-2 border-b-2 border-red-400 dark:border-red-700 flex items-center">
            <span class="w-4 h-4 bg-blue-500 dark:bg-blue-600 mr-2 rounded-sm rotate-45"></span>
            Core Medical Conditions
          </h2>
          <ul class="space-y-3 pl-4 sm:pl-6">
            <li><a href="#cardiovascular" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Cardiovascular Diseases</a>
              <ul class="pl-6 mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                <li><a href="#hypertension" class="hover:text-blue-600 dark:hover:text-blue-400">Hypertension: Diagnosis & Management</a></li>
                <li><a href="#ischemic-heart-disease" class="hover:text-blue-600 dark:hover:text-blue-400">Ischemic Heart Disease</a></li>
                <li><a href="#arrhythmias" class="hover:text-blue-600 dark:hover:text-blue-400">Arrhythmias and ECG Interpretation</a></li>
              </ul>
            </li>
            <li><a href="#respiratory" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Respiratory Diseases</a>
              <ul class="pl-6 mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                <li><a href="#asthma" class="hover:text-blue-600 dark:hover:text-blue-400">Asthma and COPD</a></li>
                <li><a href="#pneumonia" class="hover:text-blue-600 dark:hover:text-blue-400">Pneumonia: Types & Treatment</a></li>
              </ul>
            </li>
            <li><a href="#endocrine" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Endocrine Disorders</a>
              <ul class="pl-6 mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                <li><a href="#diabetes-mellitus" class="hover:text-blue-600 dark:hover:text-blue-400">Diabetes Mellitus: Type 1 & 2</a></li>
                <li><a href="#thyroid-disorders" class="hover:text-blue-600 dark:hover:text-blue-400">Thyroid Disorders</a></li>
              </ul>
            </li>
          </ul>
        </section>

        <!-- Section 2: Medical Procedures & Diagnostics -->
        <section>
          <h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4 pb-2 border-b-2 border-red-400 dark:border-red-700 flex items-center">
            <span class="w-4 h-4 bg-blue-500 dark:bg-blue-600 mr-2 rounded-sm rotate-45"></span>
            Medical Procedures & Diagnostics
          </h2>
          <ul class="space-y-3 pl-4 sm:pl-6">
            <li><a href="#surgical-techniques" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Surgical Techniques</a>
              <ul class="pl-6 mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                <li><a href="#minimally-invasive" class="hover:text-blue-600 dark:hover:text-blue-400">Minimally Invasive Surgery</a></li>
                <li><a href="#post-operative-care" class="hover:text-blue-600 dark:hover:text-blue-400">Post-Operative Care Protocols</a></li>
              </ul>
            </li>
            <li><a href="#imaging" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Medical Imaging</a>
              <ul class="pl-6 mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                <li><a href="#mri-ct-scans" class="hover:text-blue-600 dark:hover:text-blue-400">MRI & CT Scans Interpretation</a></li>
                <li><a href="#ultrasound" class="hover:text-blue-600 dark:hover:text-blue-400">Diagnostic Ultrasound</a></li>
              </ul>
            </li>
          </ul>
        </section>

        <!-- Section 3: Pharmacology & Therapeutics -->
        <section>
          <h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4 pb-2 border-b-2 border-red-400 dark:border-red-700 flex items-center">
            <span class="w-4 h-4 bg-blue-500 dark:bg-blue-600 mr-2 rounded-sm rotate-45"></span>
            Pharmacology & Therapeutics
          </h2>
          <ul class="space-y-3 pl-4 sm:pl-6">
            <li><a href="#drug-classes" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Drug Classes & Mechanisms</a>
              <ul class="pl-6 mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                <li><a href="#antibiotics" class="hover:text-blue-600 dark:hover:text-blue-400">Antibiotics: Spectrum & Resistance</a></li>
                <li><a href="#analgesics" class="hover:text-blue-600 dark:hover:text-blue-400">Analgesics & Pain Management</a></li>
              </ul>
            </li>
            <li><a href="#vaccines" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Vaccines & Immunization</a>
              <ul class="pl-6 mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                <li><a href="#childhood-immunization" class="hover:text-blue-600 dark:hover:text-blue-400">Childhood Immunization Schedule</a></li>
              </ul>
            </li>
          </ul>
        </section>

        <!-- Section 4: Public Health & Epidemiology -->
        <section>
          <h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4 pb-2 border-b-2 border-red-400 dark:border-red-700 flex items-center">
            <span class="w-4 h-4 bg-blue-500 dark:bg-blue-600 mr-2 rounded-sm rotate-45"></span>
            Public Health & Epidemiology
          </h2>
          <ul class="space-y-3 pl-4 sm:pl-6">
            <li><a href="#disease-outbreaks" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Disease Outbreaks & Control</a></li>
            <li><a href="#preventative-medicine" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Preventative Medicine Strategies</a></li>
          </ul>
        </section>

      </div>

    </div>

    <!-- Footer with simple branding -->
    <div class="bg-gray-100 dark:bg-gray-800 p-4 sm:p-6 lg:p-8 text-center text-gray-600 dark:text-gray-400 text-sm
                relative overflow-hidden
                before:content-[''] before:absolute before:bottom-0 before:left-0 before:w-full before:h-1 before:bg-yellow-500 dark:before:bg-yellow-600 before:z-0">
      <p class="relative z-10">&copy; 2023 Medical Knowledge Hub. All rights reserved.</p>
    </div>

  </div>

</div>

Componente de tabla de contenido

Un componente de tabla de contenido simple y receptivo con efectos de neón/brillo y un esquema de color otoñal, adecuado para portafolios o galerías de fotografía, incluida la compatibilidad con el modo oscuro.

Abrir Vista previa

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-sm sm:max-w-md lg:max-w-lg bg-gradient-to-br from-amber-800 via-orange-900 to-red-900 dark:from-gray-800 dark:via-gray-900 dark:to-black rounded-lg shadow-xl overflow-hidden p-6 relative group transform hover:scale-[1.01] transition-all duration-300 ease-in-out border-2 border-transparent hover:border-amber-500/50 dark:hover:border-purple-600/50">

    <!-- Glow Effect Overlay -->
    <div class="absolute inset-0 bg-amber-500/20 dark:bg-purple-500/20 rounded-lg opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-500 pointer-events-none"></div>
    <div class="absolute inset-0.5 bg-amber-300/10 dark:bg-purple-300/10 rounded-lg opacity-0 group-hover:opacity-100 group-hover:blur-md transition-opacity duration-700 pointer-events-none"></div>

    <div class="relative z-10">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-amber-200 dark:text-purple-300 mb-6 text-center tracking-wide" style="text-shadow: 0 0 10px rgba(251, 191, 36, 0.7), 0 0 20px rgba(251, 191, 36, 0.4); dark:text-shadow: 0 0 10px rgba(168, 85, 247, 0.7), 0 0 20px rgba(168, 85, 247, 0.4);">
        GALLERY SECTIONS
      </h2>

      <nav aria-label="Gallery Sections Table of Contents">
        <ul class="space-y-4">
          <li>
            <a href="#landscapes" class="block p-3 rounded-md text-amber-100 dark:text-purple-200 hover:bg-amber-700/60 dark:hover:bg-purple-800/60 transition-colors duration-200 relative overflow-hidden group/item focus:outline-none focus:ring-2 focus:ring-amber-400 dark:focus:ring-purple-400"
               style="box-shadow: 0 0 5px rgba(251, 191, 36, 0.3); dark:box-shadow: 0 0 5px rgba(168, 85, 247, 0.3);">
              <span class="relative z-10 font-medium text-lg leading-tight block">
                Landscapes
                <span class="absolute top-0 left-0 w-full h-full bg-amber-500/30 dark:bg-purple-500/30 blur-md opacity-0 group-hover/item:opacity-70 transition-opacity duration-300 glow-pulse"></span>
              </span>
            </a>
          </li>
          <li>
            <a href="#portraits" class="block p-3 rounded-md text-amber-100 dark:text-purple-200 hover:bg-amber-700/60 dark:hover:bg-purple-800/60 transition-colors duration-200 relative overflow-hidden group/item focus:outline-none focus:ring-2 focus:ring-amber-400 dark:focus:ring-purple-400"
               style="box-shadow: 0 0 5px rgba(251, 191, 36, 0.3); dark:box-shadow: 0 0 5px rgba(168, 85, 247, 0.3);">
              <span class="relative z-10 font-medium text-lg leading-tight block">
                Portraits
                <span class="absolute top-0 left-0 w-full h-full bg-amber-500/30 dark:bg-purple-500/30 blur-md opacity-0 group-hover/item:opacity-70 transition-opacity duration-300 glow-pulse"></span>
              </span>
            </a>
          </li>
          <li>
            <a href="#wildlife" class="block p-3 rounded-md text-amber-100 dark:text-purple-200 hover:bg-amber-700/60 dark:hover:bg-purple-800/60 transition-colors duration-200 relative overflow-hidden group/item focus:outline-none focus:ring-2 focus:ring-amber-400 dark:focus:ring-purple-400"
               style="box-shadow: 0 0 5px rgba(251, 191, 36, 0.3); dark:box-shadow: 0 0 5px rgba(168, 85, 247, 0.3);">
              <span class="relative z-10 font-medium text-lg leading-tight block">
                Wildlife
                <span class="absolute top-0 left-0 w-full h-full bg-amber-500/30 dark:bg-purple-500/30 blur-md opacity-0 group-hover/item:opacity-70 transition-opacity duration-300 glow-pulse"></span>
              </span>
            </a>
          </li>
          <li>
            <a href="#abstract" class="block p-3 rounded-md text-amber-100 dark:text-purple-200 hover:bg-amber-700/60 dark:hover:bg-purple-800/60 transition-colors duration-200 relative overflow-hidden group/item focus:outline-none focus:ring-2 focus:ring-amber-400 dark:focus:ring-purple-400"
               style="box-shadow: 0 0 5px rgba(251, 191, 36, 0.3); dark:box-shadow: 0 0 5px rgba(168, 85, 247, 0.3);">
              <span class="relative z-10 font-medium text-lg leading-tight block">
                Abstract
                <span class="absolute top-0 left-0 w-full h-full bg-amber-500/30 dark:bg-purple-500/30 blur-md opacity-0 group-hover/item:opacity-70 transition-opacity duration-300 glow-pulse"></span>
              </span>
            </a>
          </li>
          <li>
            <a href="#events" class="block p-3 rounded-md text-amber-100 dark:text-purple-200 hover:bg-amber-700/60 dark:hover:bg-purple-800/60 transition-colors duration-200 relative overflow-hidden group/item focus:outline-none focus:ring-2 focus:ring-amber-400 dark:focus:ring-purple-400"
               style="box-shadow: 0 0 5px rgba(251, 191, 36, 0.3); dark:box-shadow: 0 0 5px rgba(168, 85, 247, 0.3);">
              <span class="relative z-10 font-medium text-lg leading-tight block">
                Events
                <span class="absolute top-0 left-0 w-full h-full bg-amber-500/30 dark:bg-purple-500/30 blur-md opacity-0 group-hover/item:opacity-70 transition-opacity duration-300 glow-pulse"></span>
              </span>
            </a>
          </li>
        </ul>
      </nav>

      <div class="mt-6 text-center text-amber-300 dark:text-purple-400 text-sm opacity-80" style="text-shadow: 0 0 5px rgba(251, 191, 36, 0.3); dark:text-shadow: 0 0 5px rgba(168, 85, 247, 0.3);">
        <p>&copy; 2023 Photonix Photography</p>
      </div>
    </div>
  </div>
</div>

<style>
  /* This is a simple keyframe animation for the glow-pulse effect on hover */
  /* It's included directly as Tailwind doesn't support custom keyframe animations through classes alone */
  @keyframes glow-pulse {
    0% { transform: scale(0.95); opacity: 0.7; }
    50% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.7; }
  }

  .glow-pulse {
    animation: glow-pulse 1.5s infinite alternate;
  }

  /* Dark mode specific glow-pulse for visual distinctiveness */
  .dark .glow-pulse {
    animation: glow-pulse-dark 1.5s infinite alternate;
  }

  @keyframes glow-pulse-dark {
    0% { transform: scale(0.95); opacity: 0.7; }
    50% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.7; }
  }
</style>

Glassmorphism_RealEstate_TableOfContents

Un componente de tabla de contenido con estilo glassmorphism para listados de bienes raíces, con elementos translúcidos, efectos de desenfoque y un esquema de color púrpura/violeta. Es responsivo y admite el modo oscuro.

Abrir Vista previa

                <div class="p-4 md:p-8 lg:p-12 min-h-screen bg-gradient-to-br from-purple-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center font-sans">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-white/20 dark:bg-gray-800/30 backdrop-blur-md rounded-3xl shadow-xl border border-white/30 dark:border-gray-700/50 overflow-hidden relative">
    <div class="absolute inset-0 bg-gradient-to-br from-purple-200/50 to-indigo-300/50 dark:from-purple-900/50 dark:to-indigo-900/50 rounded-3xl opacity-30 blur-2xl -z-10"></div>

    <div class="p-6 md:p-8 lg:p-10">
      <h2 class="text-2xl md:text-3xl font-extrabold text-purple-900 dark:text-purple-200 mb-6 text-center drop-shadow-md">
        Property Details
      </h2>

      <nav class="">
        <ul class="space-y-4">
          <li>
            <a href="#overview" class="block p-4 rounded-xl transition-all duration-300 ease-in-out hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900
              bg-purple-100/70 dark:bg-purple-900/60 backdrop-blur-sm shadow-md
              text-purple-800 dark:text-purple-100 font-semibold text-lg md:text-xl
              flex items-center group">
              <svg class="w-6 h-6 md:w-7 md:h-7 mr-3 text-purple-600 dark:text-purple-300 group-hover:rotate-6 transition-transform" 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.75 17L9 20l-1 1h8l-1-1-1.25-3M15 10V5l-1-1H9l-1 1v5m3 0h.01M6 15h12a2 2 0 002-2V9a2 2 0 00-2-2H6a2 2 0 00-2 2v4a2 2 0 002 2z"></path>
              </svg>
              <span>Property Overview</span>
            </a>
          </li>

          <li>
            <a href="#gallery" class="block p-4 rounded-xl transition-all duration-300 ease-in-out hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900
              bg-purple-100/70 dark:bg-purple-900/60 backdrop-blur-sm shadow-md
              text-purple-800 dark:text-purple-100 font-semibold text-lg md:text-xl
              flex items-center group">
              <svg class="w-6 h-6 md:w-7 md:h-7 mr-3 text-purple-600 dark:text-purple-300 group-hover:scale-110 transition-transform" 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="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
              </svg>
              <span>Photo Gallery</span>
            </a>
          </li>

          <li>
            <a href="#features" class="block p-4 rounded-xl transition-all duration-300 ease-in-out hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900
              bg-purple-100/70 dark:bg-purple-900/60 backdrop-blur-sm shadow-md
              text-purple-800 dark:text-purple-100 font-semibold text-lg md:text-xl
              flex items-center group">
              <svg class="w-6 h-6 md:w-7 md:h-7 mr-3 text-purple-600 dark:text-purple-300 group-hover:skew-y-3 transition-transform" 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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
              </svg>
              <span>Key Features</span>
            </a>
          </li>

          <li>
            <a href="#floorplan" class="block p-4 rounded-xl transition-all duration-300 ease-in-out hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900
              bg-purple-100/70 dark:bg-purple-900/60 backdrop-blur-sm shadow-md
              text-purple-800 dark:text-purple-100 font-semibold text-lg md:text-xl
              flex items-center group">
              <svg class="w-6 h-6 md:w-7 md:h-7 mr-3 text-purple-600 dark:text-purple-300 group-hover:animate-bounce transition-transform" 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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
              </svg>
              <span>Floor Plans</span>
            </a>
          </li>

          <li>
            <a href="#location" class="block p-4 rounded-xl transition-all duration-300 ease-in-out hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900
              bg-purple-100/70 dark:bg-purple-900/60 backdrop-blur-sm shadow-md
              text-purple-800 dark:text-purple-100 font-semibold text-lg md:text-xl
              flex items-center group">
              <svg class="w-6 h-6 md:w-7 md:h-7 mr-3 text-purple-600 dark:text-purple-300 group-hover:translate-x-1 transition-transform" 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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
              </svg>
              <span>Location & Map</span>
            </a>
          </li>

          <li>
            <a href="#contact" class="block p-4 rounded-xl transition-all duration-300 ease-in-out hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900
              bg-purple-100/70 dark:bg-purple-900/60 backdrop-blur-sm shadow-md
              text-purple-800 dark:text-purple-100 font-semibold text-lg md:text-xl
              flex items-center group">
              <svg class="w-6 h-6 md:w-7 md:h-7 mr-3 text-purple-600 dark:text-purple-300 group-hover:rotate-12 transition-transform" 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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21L9.5 13.596a18.337 18.337 0 006.702 6.702l1.018-1.018a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
              </svg>
              <span>Contact Agent</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</div>

Componente de tabla de contenido

Un componente de tabla de contenido habilitado para el modo oscuro y responsivo con una paleta de colores retro / vintage, adecuado para plataformas sociales / de citas. Cuenta con un esquema de color apagado y una navegación de desplazamiento suave.

Abrir Vista previa

                <div class="p-4 sm:p-6 md:p-8 bg-gray-200 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-xs mx-auto md:max-w-sm lg:max-w-md xl:max-w-lg bg-red-800 bg-opacity-70 dark:bg-red-950 dark:bg-opacity-70 rounded-lg shadow-xl overflow-hidden backdrop-filter backdrop-blur-sm">
    <div class="p-4 sm:p-5 md:p-6 bg-red-900 bg-opacity-80 dark:bg-red-900 dark:bg-opacity-90 border-b border-rose-900 dark:border-rose-950">
      <h2 class="text-xl sm:text-2xl font-bold text-amber-200 dark:text-amber-100 uppercase tracking-wide text-center">Explore Profiles</h2>
    </div>
    <nav class="py-3 sm:py-4 md:py-5">
      <ul class="space-y-1 sm:space-y-2 px-3 sm:px-4 md:px-5">
        <li>
          <a href="#popular" class="flex items-center p-2 sm:p-3 rounded-lg text-amber-100 dark:text-amber-50 hover:bg-red-700 dark:hover:bg-red-800 transition-colors duration-200 group">
            <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-3 text-amber-300 dark:text-amber-200 group-hover:text-amber-100 dark:group-hover:text-amber-50" 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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a4 4 0 014-4h12v-2.334A4.9 4.9 0 0013 3h-1.06C11.393 4.8 9.721 6 7.854 6c-.958 0-1.868-.27-2.614-.723M17 20a2 2 0 01-2 2H3a2 2 0 01-2-2

Bauhaus_Retro_Photography_TOC

Un componente de tabla de contenido complejo y receptivo para sitios web de fotografía, inspirado en los principios de diseño de la Bauhaus y una paleta de colores retro/vintage. Cuenta con formas geométricas, colores apagados y compatibilidad con el modo oscuro completo, ideal para galerías de fotos y portafolios.

Abrir Vista previa

                <div class="font-sans bg-[#F4F1EA] text-[#3D3B40] dark:bg-[#2A2B2D] dark:text-[#EAE7DC] p-4 sm:p-6 md:p-8 lg:p-10 min-h-screen">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 lg:grid-cols-5 gap-6 sm:gap-8 md:gap-10">

    <!-- Main Content Area (simulated) -->
    <div class="hidden md:block md:col-span-3 lg:col-span-4 rounded-lg p-6 lg:p-8 bg-[#EAE7DC] dark:bg-[#3D3B40] shadow-md dark:shadow-lg">
      <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#ACD5C3] dark:text-[#A7C9A4] mb-4">Gallery Showcase</h1>
      <p class="text-lg leading-relaxed mb-6">Explore the meticulous details and vibrant stories captured through our lens. This simulated content area demonstrates how the Table of Contents would integrate alongside your main photography gallery or portfolio.</p>
      
      <h2 class="text-2xl sm:text-3xl font-semibold mb-4 text-[#ACD5C3] dark:text-[#A7C9A4]">Project Overview</h2>
      <img src="https://picsum.photos/seed/bauhaus1/800/450" alt="Abstract geometric art" class="w-full h-auto object-cover rounded-md mb-6 shadow-sm">
      <p class="mb-4">Paragraph about the project. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

      <h2 class="text-2xl sm:text-3xl font-semibold mb-4 text-[#ACD5C3] dark:text-[#A7C9A4]">Technique &amp; Vision</h2>
      <img src="https://picsum.photos/seed/bauhaus2/800/450" alt="Photography equipment" class="w-full h-auto object-cover rounded-md mb-6 shadow-sm">
      <p class="mb-4">Further details on the techniques used. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

      <h2 class="text-2xl sm:text-3xl font-semibold mb-4 text-[#ACD5C3] dark:text-[#A7C9A4]">Behind the Scenes</h2>
      <img src="https://picsum.photos/seed/bauhaus3/800/450" alt="Photographer at work" class="w-full h-auto object-cover rounded-md mb-6 shadow-sm">
      <p>Insights into the creative process. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <!-- Table of Contents Sidebar -->
    <div class="md:col-span-1 lg:col-span-1">
      <div class="bg-[#ACD5C3] dark:bg-[#8D9B8C] p-4 sm:p-6 rounded-lg shadow-xl dark:shadow-2xl overflow-hidden">
        <h2 class="text-xl sm:text-2xl font-bold text-[#F4F1EA] dark:text-[#2A2B2D] mb-4 pb-2 border-b-2 border-[#D7B102] dark:border-[#BFB996]">
          <span class="block transform -rotate-6 origin-bottom-left inline-block mr-2 text-2xl">&#x25B8;</span>
          Contents
        </h2>

        <nav class="">
          <ul class="space-y-3">
            <li>
              <a href="#section1" class="block p-3 rounded-md transition-all duration-300 ease-in-out 
                          bg-[#D7B102] text-[#3D3B40] font-semibold tracking-wide uppercase 
                          hover:bg-[#EAE7DC] hover:text-[#3D3B40] hover:shadow-inner-md 
                          dark:bg-[#BFB996] dark:text-[#2A2B2D] 
                          dark:hover:bg-[#EAE7DC] dark:hover:text-[#2A2B2D] 
                          relative overflow-hidden group">
                <span class="relative z-10">
                  1. <span class="hidden sm:inline">Project</span> Overview
                </span>
                <span class="absolute top-0 left-0 w-8 h-full bg-[#EAE7DC] dark:bg-[#2A2B2D] transform -skew-x-12 origin-top-left 
                            group-hover:w-full transition-all duration-500 ease-out z-0 opacity-0 group-hover:opacity-100"></span>
              </a>
            </li>
            <li>
              <a href="#section2" class="block p-3 rounded-md transition-all duration-300 ease-in-out 
                          bg-[#D3A20B] text-[#3D3B40] font-semibold tracking-wide uppercase
                          hover:bg-[#EAE7DC] hover:text-[#3D3B40] hover:shadow-inner-md 
                          dark:bg-[#B3A880] dark:text-[#2A2B2D] 
                          dark:hover:bg-[#EAE7DC] dark:hover:text-[#2A2B2D] 
                          relative overflow-hidden group">
                <span class="relative z-10">
                  2. <span class="hidden sm:inline">Technique &amp;</span> Vision
                </span>
                <span class="absolute top-0 left-0 w-8 h-full bg-[#EAE7DC] dark:bg-[#2A2B2D] transform -skew-x-12 origin-top-left 
                            group-hover:w-full transition-all duration-500 ease-out z-0 opacity-0 group-hover:opacity-100"></span>
              </a>
            </li>
            <li>
              <a href="#section3" class="block p-3 rounded-md transition-all duration-300 ease-in-out 
                          bg-[#CF920E] text-[#3D3B40] font-semibold tracking-wide uppercase
                          hover:bg-[#EAE7DC] hover:text-[#3D3B40] hover:shadow-inner-md 
                          dark:bg-[#A99F7A] dark:text-[#2A2B2D] 
                          dark:hover:bg-[#EAE7DC] dark:hover:text-[#2A2B2D] 
                          relative overflow-hidden group">
                <span class="relative z-10">
                  3. <span class="hidden sm:inline">Behind the</span> Scenes
                </span>
                <span class="absolute top-0 left-0 w-8 h-full bg-[#EAE7DC] dark:bg-[#2A2B2D] transform -skew-x-12 origin-top-left 
                            group-hover:w-full transition-all duration-500 ease-out z-0 opacity-0 group-hover:opacity-100"></span>
              </a>
            </li>
            <li>
              <a href="#section4" class="block p-3 rounded-md transition-all duration-300 ease-in-out 
                          bg-[#CB8310] text-[#3D3B40] font-semibold tracking-wide uppercase
                          hover:bg-[#EAE7DC] hover:text-[#3D3B40] hover:shadow-inner-md 
                          dark:bg-[#A09673] dark:text-[#2A2B2D] 
                          dark:hover:bg-[#EAE7DC] dark:hover:text-[#2A2B2D] 
                          relative overflow-hidden group">
                <span class="relative z-10">
                  4. <span class="hidden sm:inline">Client</span> Testimonials
                </span>
                <span class="absolute top-0 left-0 w-8 h-full bg-[#EAE7DC] dark:bg-[#2A2B2D] transform -skew-x-12 origin-top-left 
                            group-hover:w-full transition-all duration-500 ease-out z-0 opacity-0 group-hover:opacity-100"></span>
              </a>
            </li>
            <li>
              <a href="#section5" class="block p-3 rounded-md transition-all duration-300 ease-in-out 
                          bg-[#C77412] text-[#3D3B40] font-semibold tracking-wide uppercase
                          hover:bg-[#EAE7DC] hover:text-[#3D3B40] hover:shadow-inner-md 
                          dark:bg-[#978D6D] dark:text-[#2A2B2D] 
                          dark:hover:bg-[#EAE7DC] dark:hover:text-[#2A2B2D] 
                          relative overflow-hidden group">
                <span class="relative z-10">
                  5. <span class="hidden sm:inline">Contact</span> &amp; Booking
                </span>
                <span class="absolute top-0 left-0 w-8 h-full bg-[#EAE7DC] dark:bg-[#2A2B2D] transform -skew-x-12 origin-top-left 
                            group-hover:w-full transition-all duration-500 ease-out z-0 opacity-0 group-hover:opacity-100"></span>
              </a>
            </li>
          </ul>
        </nav>

        <div class="mt-8 pt-6 border-t-2 border-[#D7B102] dark:border-[#BFB996]">
          <h3 class="text-lg font-bold text-[#F4F1EA] dark:text-[#2A2B2D] mb-4">Related Galleries</h3>
          <ul class="space-y-4">
            <li>
              <a href="#" class="flex items-center space-x-3 text-[#F4F1EA] hover:text-[#D7B102] dark:text-[#EAE7DC] dark:hover:text-[#BFB996] transition-colors duration-200">
                <img src="https://picsum.photos/seed/gallery1/60/60" alt="Image from cityscape gallery" class="w-12 h-12 object-cover rounded-md shadow-sm border border-[#D7B102] dark:border-[#BFB996]">
                <span class="font-medium text-sm">Cityscapes &amp; Architecture</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center space-x-3 text-[#F4F1EA] hover:text-[#D7B102] dark:text-[#EAE7DC] dark:hover:text-[#BFB996] transition-colors duration-200">
                <img src="https://picsum.photos/seed/gallery2/60/60" alt="Image from nature photography gallery" class="w-12 h-12 object-cover rounded-md shadow-sm border border-[#D7B102] dark:border-[#BFB996]">
                <span class="font-medium text-sm">Nature &amp; Wildlife</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center space-x-3 text-[#F4F1EA] hover:text-[#D7B102] dark:text-[#EAE7DC] dark:hover:text-[#BFB996] transition-colors duration-200">
                <img src="https://picsum.photos/seed/gallery3/60/60" alt="Image from portrait gallery" class="w-12 h-12 object-cover rounded-md shadow-sm border border-[#D7B102] dark:border-[#BFB996]">
                <span class="font-medium text-sm">Portraits &amp; Editorial</span>
              </a>
            </li>
          </ul>
        </div>

        <div class="mt-8 pt-6 border-t-2 border-[#D7B102] dark:border-[#BFB996]">
          <h3 class="text-lg font-bold text-[#F4F1EA] dark:text-[#2A2B2D] mb-4">Your Photographer</h3>
          <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/82.jpg" alt="Photographer's avatar" class="w-16 h-16 rounded-full object-cover border-4 border-[#D7B102] dark:border-[#BFB996] shadow-md">
            <div>
              <p class="font-semibold text-lg text-[#F4F1EA] dark:text-[#EAE7DC]">Max Steiner</p>
              <p class="text-sm text-[#F4F1EA] dark:text-[#CECAC2] opacity-80">Lead Photographer</p>
            </div>
          </div>
          <p class="text-sm italic text-[#F4F1EA] dark:text-[#EAE7DC] opacity-90 mt-4">"Capturing moments, crafting stories. Bauhaus principles inspire my compositions."
          </p>
          <a href="#" class="mt-4 block w-full px-4 py-2 text-center rounded-md text-[#3D3B40] bg-[#D7B102] hover:bg-[#EAE7DC] 
                      dark:text-[#2A2B2D] dark:bg-[#BFB996] dark:hover:bg-[#EAE7DC] 
                      font-bold transition-all duration-300 ease-in-out shadow-md hover:shadow-lg 
                      transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-[#D7B102] dark:focus:ring-[#BFB996] focus:ring-opacity-75">
            View Portfolio
          </a>
        </div>

      </div>
    </div>

  </div>
</div>

Retro Candy Tabla de contenidos

Un componente de tabla de contenido de temática retro nostálgico con una combinación de colores inspirada en los dulces, adecuada para sitios web de alimentos y restaurantes. Cuenta con una navegación "pegajosa" similar a una barra lateral con indicadores de desplazamiento suave y soporte para el modo oscuro.

Abrir Vista previa

                <div class="font-sans bg-amber-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100 p-4 sm:p-6 md:p-8 relative overflow-x-hidden">

  <!-- Retro Border Top -->
  <div class="hidden md:block absolute top-0 left-0 w-full h-4 bg-gradient-to-r from-pink-400 via-purple-400 to-teal-400 dark:from-pink-600 dark:via-purple-600 dark:to-teal-600 shadow-lg z-10"></div>

  <div class="max-w-7xl mx-auto flex flex-col md:flex-row gap-8 lg:gap-12 relative z-20">

    <!-- Table of Contents Sidebar -->
    <nav class="md:w-1/4 lg:w-1/5 flex-shrink-0 relative">
      <div class="sticky top-8 lg:top-12 p-5 md:p-6 bg-gradient-to-br from-pink-200 to-purple-200 dark:from-pink-800 dark:to-purple-800 rounded-3xl shadow-xl border-4 border-pink-400 dark:border-pink-600 transform -rotate-1 skew-x-1 origin-top-left">
        <div class="relative p-2 md:p-3 bg-gradient-to-br from-yellow-100 to-green-100 dark:from-yellow-700 dark:to-green-700 rounded-2xl border-dashed border-2 border-green-500 dark:border-green-400">
          <h3 class="text-2xl lg:text-3xl font-extrabold text-purple-800 dark:text-yellow-100 mb-4 text-center font-serif tracking-wider transform rotate-1 scale-105">
            Sweet Eats Menu
          </h3>
          <ul class="space-y-3">
            <li>
              <a href="#appetizers" class="block text-lg lg:text-xl font-bold text-gray-700 dark:text-gray-200 hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200 py-1 px-3 rounded-lg hover:bg-yellow-200 dark:hover:bg-yellow-600 transform hover:scale-105 hover:rotate-1 origin-left">
                <span class="mr-2 text-pink-500 text-2xl dark:text-pink-400">&#x2605;</span> Appetizers
              </a>
            </li>
            <li>
              <a href="#main-courses" class="block text-lg lg:text-xl font-bold text-gray-700 dark:text-gray-200 hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200 py-1 px-3 rounded-lg hover:bg-yellow-200 dark:hover:bg-yellow-600 transform hover:scale-105 hover:rotate-1 origin-left">
                <span class="mr-2 text-pink-500 text-2xl dark:text-pink-400">&#x2600;</span> Main Courses
              </a>
            </li>
            <li>
              <a href="#desserts" class="block text-lg lg:text-xl font-bold text-gray-700 dark:text-gray-200 hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200 py-1 px-3 rounded-lg hover:bg-yellow-200 dark:hover:bg-yellow-600 transform hover:scale-105 hover:rotate-1 origin-left">
                <span class="mr-2 text-pink-500 text-2xl dark:text-pink-400">&#x2764;</span> Desserts
              </a>
            </li>
            <li>
              <a href="#drinks" class="block text-lg lg:text-xl font-bold text-gray-700 dark:text-gray-200 hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200 py-1 px-3 rounded-lg hover:bg-yellow-200 dark:hover:bg-yellow-600 transform hover:scale-105 hover:rotate-1 origin-left">
                <span class="mr-2 text-pink-500 text-2xl dark:text-pink-400">&#x2615;</span> Drinks
              </a>
            </li>
            <li>
              <a href="#specials" class="block text-lg lg:text-xl font-bold text-gray-700 dark:text-gray-200 hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200 py-1 px-3 rounded-lg hover:bg-yellow-200 dark:hover:bg-yellow-600 transform hover:scale-105 hover:rotate-1 origin-left">
                <span class="mr-2 text-pink-500 text-2xl dark:text-pink-400">&#x1F36C;</span> Chef's Specials
              </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- Main Content Area -->
    <main class="md:flex-1 p-5 md:p-8 bg-gradient-to-br from-mint-green-100 to-blue-100 dark:from-mint-green-800 dark:to-blue-800 rounded-3xl shadow-2xl border-4 border-mint-green-400 dark:border-mint-green-600 transform rotate-1 skew-y-1 origin-top-right">
      <div class="relative bg-white dark:bg-gray-800 p-6 md:p-8 rounded-2xl shadow-inner border-dashed border-2 border-blue-500 dark:border-blue-400">

        <h2 id="appetizers" class="text-4xl lg:text-5xl font-extrabold text-blue-800 dark:text-blue-100 mb-6 font-serif tracking-wide transform -rotate-1 origin-top-left">
          Appetizers <span class="text-pink-500 text-5xl dark:text-pink-400">&#x2605;</span>
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
          <div class="border-4 border-yellow-300 dark:border-yellow-500 rounded-xl p-4 bg-yellow-50 dark:bg-yellow-900 shadow-md transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/400/250?random=1" alt="Crispy Spring Rolls" class="rounded-lg mb-3 shadow-lg border-2 border-yellow-400 dark:border-yellow-600">
            <h3 class="text-2xl font-bold text-purple-700 dark:text-yellow-200 mb-2">Crispy Spring Rolls</h3>
            <p class="text-lg text-gray-600 dark:text-gray-300">Golden fried vegetarian spring rolls served with sweet chili sauce. A classic!</p>
          </div>
          <div class="border-4 border-yellow-300 dark:border-yellow-500 rounded-xl p-4 bg-yellow-50 dark:bg-yellow-900 shadow-md transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/400/250?random=2" alt="Spicy Nacho Bites" class="rounded-lg mb-3 shadow-lg border-2 border-yellow-400 dark:border-yellow-600">
            <h3 class="text-2xl font-bold text-purple-700 dark:text-yellow-200 mb-2">Spicy Nacho Bites</h3>
            <p class="text-lg text-gray-600 dark:text-gray-300">Miniature nacho bites loaded with jalapeños, cheddar, and guacamole.</p>
          </div>
        </div>

        <h2 id="main-courses" class="text-4xl lg:text-5xl font-extrabold text-blue-800 dark:text-blue-100 mb-6 font-serif tracking-wide transform rotate-2 origin-top-right">
          Main Courses <span class="text-pink-500 text-5xl dark:text-pink-400">&#x2600;</span>
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
          <div class="border-4 border-lime-300 dark:border-lime-500 rounded-xl p-4 bg-lime-50 dark:bg-lime-900 shadow-md transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/400/250?random=3" alt="Mushroom & Truffle Pasta" class="rounded-lg mb-3 shadow-lg border-2 border-lime-400 dark:border-lime-600">
            <h3 class="text-2xl font-bold text-purple-700 dark:text-lime-200 mb-2">Mushroom & Truffle Pasta</h3>
            <p class="text-lg text-gray-600 dark:text-gray-300">Homemade tagliatelle with wild mushrooms and a rich black truffle sauce.</p>
          </div>
          <div class="border-4 border-lime-300 dark:border-lime-500 rounded-xl p-4 bg-lime-50 dark:bg-lime-900 shadow-md transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/400/250?random=4" alt="Honey Glazed Salmon" class="rounded-lg mb-3 shadow-lg border-2 border-lime-400 dark:border-lime-600">
            <h3 class="text-2xl font-bold text-purple-700 dark:text-lime-200 mb-2">Honey Glazed Salmon</h3>
            <p class="text-lg text-gray-600 dark:text-gray-300">Pan-seared salmon fillet with a sweet honey glaze, served with roasted vegetables.</p>
          </div>
        </div>

        <h2 id="desserts" class="text-4xl lg:text-5xl font-extrabold text-blue-800 dark:text-blue-100 mb-6 font-serif tracking-wide transform -rotate-1 origin-bottom-left">
          Desserts <span class="text-pink-500 text-5xl dark:text-pink-400">&#x2764;</span>
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
          <div class="border-4 border-pink-300 dark:border-pink-500 rounded-xl p-4 bg-pink-50 dark:bg-pink-900 shadow-md transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/400/250?random=5" alt="Rainbow Swirl Cake" class="rounded-lg mb-3 shadow-lg border-2 border-pink-400 dark:border-pink-600">
            <h3 class="text-2xl font-bold text-purple-700 dark:text-pink-200 mb-2">Rainbow Swirl Cake</h3>
            <p class="text-lg text-gray-600 dark:text-gray-300">Layers of vanilla cake with vibrant rainbow frosting. Pure joy!</p>
          </div>
          <div class="border-4 border-pink-300 dark:border-pink-500 rounded-xl p-4 bg-pink-50 dark:bg-pink-900 shadow-md transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/400/250?random=6" alt="Bubblegum Ice Cream" class="rounded-lg mb-3 shadow-lg border-2 border-pink-400 dark:border-pink-600">
            <h3 class="text-2xl font-bold text-purple-700 dark:text-pink-200 mb-2">Bubblegum Ice Cream</h3>
            <p class="text-lg text-gray-600 dark:text-gray-300">Classic bubblegum flavored ice cream with real candy pieces. Nostalgia in a scoop!</p>
          </div>
        </div>

        <h2 id="drinks" class="text-4xl lg:text-5xl font-extrabold text-blue-800 dark:text-blue-100 mb-6 font-serif tracking-wide transform rotate-2 origin-bottom-right">
          Drinks <span class="text-pink-500 text-5xl dark:text-pink-400">&#x2615;</span>
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
          <div class="border-4 border-teal-300 dark:border-teal-500 rounded-xl p-4 bg-teal-50 dark:bg-teal-900 shadow-md transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/400/250?random=7" alt="Retro Soda Floats" class="rounded-lg mb-3 shadow-lg border-2 border-teal-400 dark:border-teal-600">
            <h3 class="text-2xl font-bold text-purple-700 dark:text-teal-200 mb-2">Retro Soda Floats</h3>
            <p class="text-lg text-gray-600 dark:text-gray-300">Your choice of classic soda topped with a generous scoop of vanilla ice cream.</p>
          </div>
          <div class="border-4 border-teal-300 dark:border-teal-500 rounded-xl p-4 bg-teal-50 dark:bg-teal-900 shadow-md transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/400/250?random=8" alt="Cotton Candy Milkshake" class="rounded-lg mb-3 shadow-lg border-2 border-teal-400 dark:border-teal-600">
            <h3 class="text-2xl font-bold text-purple-700 dark:text-teal-200 mb-2">Cotton Candy Milkshake</h3>
            <p class="text-lg text-gray-600 dark:text-gray-300">A whimsical milkshake blend with real cotton candy swirls and sprinkles.</p>
          </div>
        </div>

        <h2 id="specials" class="text-4xl lg:text-5xl font-extrabold text-blue-800 dark:text-blue-100 mb-6 font-serif tracking-wide transform -rotate-1 origin-top-left">
          Chef's Specials <span class="text-pink-500 text-5xl dark:text-pink-400">&#x1F36C;</span>
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="border-4 border-purple-300 dark:border-purple-500 rounded-xl p-4 bg-purple-50 dark:bg-purple-900 shadow-md transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/400/250?random=9" alt="Grandma's Meatloaf" class="rounded-lg mb-3 shadow-lg border-2 border-purple-400 dark:border-purple-600">
            <h3 class="text-2xl font-bold text-purple-700 dark:text-purple-200 mb-2">Grandma's Meatloaf</h3>
            <p class="text-lg text-gray-600 dark:text-gray-300">A heartwarming classic, just like grandma used to make. Served with mashed potatoes.</p>
          </div>
          <div class="border-4 border-purple-300 dark:border-purple-500 rounded-xl p-4 bg-purple-50 dark:bg-purple-900 shadow-md transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/400/250?random=10" alt="Mystery Box Dessert" class="rounded-lg mb-3 shadow-lg border-2 border-purple-400 dark:border-purple-600">
            <h3 class="text-2xl font-bold text-purple-700 dark:text-purple-200 mb-2">Mystery Box Dessert</h3>
            <p class="text-lg text-gray-600 dark:text-gray-300">A surprise dessert creation from our chef, changes daily! Ask your server.</p>
          </div>
        </div>

      </div>
    </main>

  </div>

  <!-- Retro Border Bottom -->
  <div class="hidden md:block absolute bottom-0 right-0 w-full h-4 bg-gradient-to-l from-pink-400 via-purple-400 to-teal-400 dark:from-pink-600 dark:via-purple-600 dark:to-teal-600 shadow-lg z-10"></div>

</div>

Tabla de contenido Componente - Tonos de tierra 3D

Un complejo componente de tabla de contenido inspirado en 3D para sitios web comerciales y corporativos, con tonos tierra y capacidad de respuesta completa con soporte para modo oscuro. Diseñado para proporcionar profundidad y compromiso.

Abrir Vista previa

                <div class="font-sans bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 p-4 md:p-8 lg:p-12 min-h-screen">

  <div class="max-w-7xl mx-auto py-8 lg:py-16">
    <h2 class="text-4xl lg:text-5xl font-extrabold text-center mb-12 lg:mb-16 tracking-tight text-stone-800 dark:text-stone-200 relative">
      <span class="block">Table of Contents</span>
      <span class="absolute top-full left-1/2 -translate-x-1/2 w-24 h-1 bg-amber-500 rounded-full mt-2"></span>
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- TOC Item 1 -->
      <a href="#introduction" class="group block perspective-1000">
        <div class="relative bg-stone-200 dark:bg-stone-800 rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 transform-style-preserve-3d group-hover:rotateY-5 group-hover:rotateX-5 group-hover:scale-105 group-hover:shadow-2xl dark:group-hover:shadow-xl-dark backface-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-amber-500 to-amber-600 opacity-20 dark:opacity-10 rounded-3xl after:absolute after:inset-0 after:rounded-3xl after:shadow-inner-xl after:dark:shadow-inner-xl-dark"></div>
          <div class="p-6 md:p-8 lg:p-10 relative z-10 flex flex-col items-center text-center">
            <div class="w-16 h-16 bg-amber-400 dark:bg-amber-600 rounded-full flex items-center justify-center mb-4 transform translateZ-20 shadow-md">
              <svg class="w-8 h-8 text-white" 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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253m9 0c1.168-.776 2.754-1.253 4.5-1.253s3.332.477 4.5 1.253m-9 0V14m0-7a3 3 0 013 3v2m0 0l-1.477 1.477L9 16m4-4s-1.143-2-3-2m9 0a3 3 0 013 3v2m0 0l-1.477 1.477L21 16m-4-4c-1.143 2-3 2-3 2s-1.143 0-3-2"></path></svg>
            </div>
            <h3 class="text-2xl font-bold mb-2 text-stone-800 dark:text-stone-100 transform translateZ-10">1. Introduction</h3>
            <p class="text-stone-700 dark:text-stone-300 text-sm transform translateZ-5">Overview of our mission and values.</p>
            <span class="mt-4 inline-block px-4 py-2 bg-amber-500 dark:bg-amber-700 text-white text-xs font-semibold rounded-full transform translateZ-15 shadow-lg group-hover:bg-amber-600 dark:group-hover:bg-amber-800 transition-colors duration-200">Read More</span>
          </div>
        </div>
      </a>

      <!-- TOC Item 2 -->
      <a href="#company-history" class="group block perspective-1000">
        <div class="relative bg-stone-200 dark:bg-stone-800 rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 transform-style-preserve-3d group-hover:rotateY-5 group-hover:rotateX-5 group-hover:scale-105 group-hover:shadow-2xl dark:group-hover:shadow-xl-dark backface-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-green-600 to-green-700 opacity-20 dark:opacity-10 rounded-3xl after:absolute after:inset-0 after:rounded-3xl after:shadow-inner-xl after:dark:shadow-inner-xl-dark"></div>
          <div class="p-6 md:p-8 lg:p-10 relative z-10 flex flex-col items-center text-center">
            <div class="w-16 h-16 bg-green-500 dark:bg-green-700 rounded-full flex items-center justify-center mb-4 transform translateZ-20 shadow-md">
              <svg class="w-8 h-8 text-white" 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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
            </div>
            <h3 class="text-2xl font-bold mb-2 text-stone-800 dark:text-stone-100 transform translateZ-10">2. Company History</h3>
            <p class="text-stone-700 dark:text-stone-300 text-sm transform translateZ-5">Key milestones and growth journey.</p>
            <span class="mt-4 inline-block px-4 py-2 bg-green-600 dark:bg-green-800 text-white text-xs font-semibold rounded-full transform translateZ-15 shadow-lg group-hover:bg-green-700 dark:group-hover:bg-green-900 transition-colors duration-200">Explore Past</span>
          </div>
        </div>
      </a>

      <!-- TOC Item 3 -->
      <a href="#our-services" class="group block perspective-1000">
        <div class="relative bg-stone-200 dark:bg-stone-800 rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 transform-style-preserve-3d group-hover:rotateY-5 group-hover:rotateX-5 group-hover:scale-105 group-hover:shadow-2xl dark:group-hover:shadow-xl-dark backface-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-blue-600 to-blue-700 opacity-20 dark:opacity-10 rounded-3xl after:absolute after:inset-0 after:rounded-3xl after:shadow-inner-xl after:dark:shadow-inner-xl-dark"></div>
          <div class="p-6 md:p-8 lg:p-10 relative z-10 flex flex-col items-center text-center">
            <div class="w-16 h-16 bg-blue-500 dark:bg-blue-700 rounded-full flex items-center justify-center mb-4 transform translateZ-20 shadow-md">
              <svg class="w-8 h-8 text-white" 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 13.255v-2.189a1.125 1.125 0 011.125-1.125h.875a.875.875 0 00.875-.875V7a.875.875 0 00-.875-.875H22a1.125 1.125 0 01-1.125-1.125V4.255a1.125 1.125 0 00-1.125-1.125H16.89M12 17.5a4.5 4.5 0 110-9 4.5 4.5 0 010 9zM12 17.5V21M12 6.5V3"></path></svg>
            </div>
            <h3 class="text-2xl font-bold mb-2 text-stone-800 dark:text-stone-100 transform translateZ-10">3. Our Services</h3>
            <p class="text-stone-700 dark:text-stone-300 text-sm transform translateZ-5">Comprehensive solutions for your business.</p>
            <span class="mt-4 inline-block px-4 py-2 bg-blue-600 dark:bg-blue-800 text-white text-xs font-semibold rounded-full transform translateZ-15 shadow-lg group-hover:bg-blue-700 dark:group-hover:bg-blue-900 transition-colors duration-200">View Offerings</span>
          </div>
        </div>
      </a>

      <!-- TOC Item 4 -->
      <a href="#client-testimonials" class="group block perspective-1000">
        <div class="relative bg-stone-200 dark:bg-stone-800 rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 transform-style-preserve-3d group-hover:rotateY-5 group-hover:rotateX-5 group-hover:scale-105 group-hover:shadow-2xl dark:group-hover:shadow-xl-dark backface-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-red-500 to-red-600 opacity-20 dark:opacity-10 rounded-3xl after:absolute after:inset-0 after:rounded-3xl after:shadow-inner-xl after:dark:shadow-inner-xl-dark"></div>
          <div class="p-6 md:p-8 lg:p-10 relative z-10 flex flex-col items-center text-center">
            <div class="w-16 h-16 bg-red-400 dark:bg-red-600 rounded-full flex items-center justify-center mb-4 transform translateZ-20 shadow-md">
              <svg class="w-8 h-8 text-white" 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="M7 8h10M7 12h10M7 16h10M4 6h16a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V8a2 2 0 012-2z"></path></svg>
            </div>
            <h3 class="text-2xl font-bold mb-2 text-stone-800 dark:text-stone-100 transform translateZ-10">4. Client Testimonials</h3>
            <p class="text-stone-700 dark:text-stone-300 text-sm transform translateZ-5">Hear from our satisfied clients.</p>
            <span class="mt-4 inline-block px-4 py-2 bg-red-500 dark:bg-red-700 text-white text-xs font-semibold rounded-full transform translateZ-15 shadow-lg group-hover:bg-red-600 dark:group-hover:bg-red-800 transition-colors duration-200">Read Reviews</span>
          </div>
        </div>
      </a>

      <!-- TOC Item 5 -->
      <a href="#our-team" class="group block perspective-1000">
        <div class="relative bg-stone-200 dark:bg-stone-800 rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 transform-style-preserve-3d group-hover:rotateY-5 group-hover:rotateX-5 group-hover:scale-105 group-hover:shadow-2xl dark:group-hover:shadow-xl-dark backface-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-purple-500 to-purple-600 opacity-20 dark:opacity-10 rounded-3xl after:absolute after:inset-0 after:rounded-3xl after:shadow-inner-xl after:dark:shadow-inner-xl-dark"></div>
          <div class="p-6 md:p-8 lg:p-10 relative z-10 flex flex-col items-center text-center">
            <div class="w-16 h-16 bg-purple-400 dark:bg-purple-600 rounded-full flex items-center justify-center mb-4 transform translateZ-20 shadow-md">
              <svg class="w-8 h-8 text-white" 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="M17 20h-8a4 4 0 01-4-4v-1.586a1 1 0 01-.293-.707L4 12V6a2 2 0 012-2h12a2 2 0 012 2v6a2 2 0 01-2 2h-1m-7 8a4 4 0 100-8 4 4 0 000 8z"></path></svg>
            </div>
            <h3 class="text-2xl font-bold mb-2 text-stone-800 dark:text-stone-100 transform translateZ-10">5. Our Team</h3>
            <p class="text-stone-700 dark:text-stone-300 text-sm transform translateZ-5">Meet the experts behind our success.</p>
            <span class="mt-4 inline-block px-4 py-2 bg-purple-500 dark:bg-purple-700 text-white text-xs font-semibold rounded-full transform translateZ-15 shadow-lg group-hover:bg-purple-600 dark:group-hover:bg-purple-800 transition-colors duration-200">Meet Us</span>
          </div>
        </div>
      </a>

      <!-- TOC Item 6 -->
      <a href="#contact-us" class="group block perspective-1000">
        <div class="relative bg-stone-200 dark:bg-stone-800 rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 transform-style-preserve-3d group-hover:rotateY-5 group-hover:rotateX-5 group-hover:scale-105 group-hover:shadow-2xl dark:group-hover:shadow-xl-dark backface-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-teal-500 to-teal-600 opacity-20 dark:opacity-10 rounded-3xl after:absolute after:inset-0 after:rounded-3xl after:shadow-inner-xl after:dark:shadow-inner-xl-dark"></div>
          <div class="p-6 md:p-8 lg:p-10 relative z-10 flex flex-col items-center text-center">
            <div class="w-16 h-16 bg-teal-400 dark:bg-teal-600 rounded-full flex items-center justify-center mb-4 transform translateZ-20 shadow-md">
              <svg class="w-8 h-8 text-white" 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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
            </div>
            <h3 class="text-2xl font-bold mb-2 text-stone-800 dark:text-stone-100 transform translateZ-10">6. Contact Us</h3>
            <p class="text-stone-700 dark:text-stone-300 text-sm transform translateZ-5">Get in touch for inquiries.</p>
            <span class="mt-4 inline-block px-4 py-2 bg-teal-500 dark:bg-teal-700 text-white text-xs font-semibold rounded-full transform translateZ-15 shadow-lg group-hover:bg-teal-600 dark:group-hover:bg-teal-800 transition-colors duration-200">Contact Now</span>
          </div>
        </div>
      </a>

    </div>
  </div>

  <style>
  /* Adding custom CSS for 3D transforms */
  .perspective-1000 {
    perspective: 1000px;
  }

  .transform-style-preserve-3d {
    transform-style: preserve-3d;
  }

  .rotateY-5 {
    transform: rotateY(5deg);
  }

  .rotateX-5 {
    transform: rotateX(5deg);
  }
  .group-hover\:rotateY-5:hover {
    transform: rotateY(5deg) scale(1.05);
  }
  .group-hover\:rotateX-5:hover {
    transform: rotateX(5deg) scale(1.05);
  }
  .group-hover\:scale-105:hover {
    transform: scale(1.05);
  }

  /* Combining for better 3D effect on hover */
  .group-hover\:rotateY-5.group-hover\:rotateX-5.group-hover\:scale-105:hover {
    transform: rotateY(5deg) rotateX(5deg) scale(1.05);
  }
  
  /* Z-axis transforms */
  .translateZ-5 {
    transform: translateZ(5px);
  }
  .translateZ-10 {
    transform: translateZ(10px);
  }
  .translateZ-15 {
    transform: translateZ(15px);
  }
  .translateZ-20 {
    transform: translateZ(20px);
  }

  /* Inner shadow for '3D' depth */
  .shadow-inner-xl {
    box-shadow: inset 0 6px 12px rgba(0,0,0,0.1);
  }
  .dark\:shadow-inner-xl-dark {
    box-shadow: inset 0 6px 12px rgba(255,255,255,0.05);
  }
  .shadow-xl-dark {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
  }
  
  /* Backface visibility to prevent flickering on 3D transforms */
  .backface-hidden {
    backface-visibility: hidden;
  }
  </style>

</div>

Componente de tabla de contenido

Un componente de tabla de contenido receptivo con un diseño esqueuomórfico, combinación de colores triádica y compatibilidad con temas oscuros, adecuado para interfaces de redes sociales. Sin JavaScript, solo HTML y Tailwind CSS.

Abrir Vista previa

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