Componentes de búsqueda

Categorías

Componentes Tabla de contenidos

Tabla de contenidos

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

Tabla de contenido Componente - Reserva/Reserva

Un componente de tabla de contenido simple y receptivo para sistemas de reservas, con colores en escala de grises y sutiles transiciones de degradado. Incluye soporte para modo oscuro.

Abrir Vista previa

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="relative p-6 sm:p-8 bg-gradient-to-r from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white mb-2 leading-tight">
        Your Reservation Guide
      </h2>
      <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300">
        Navigate through your booking steps.
      </p>
      <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10 pointer-events-none rounded-lg" style="background-image: linear-gradient(135deg, #e0e0e0 0%, #ffffff 100%); dark-background-image: linear-gradient(135deg, #333333 0%, #1a1a1a 100%);"></div>
    </div>
    <nav aria-label="Booking Navigation" class="p-4 sm:p-6 space-y-4">
      <a href="#step-1" class="flex items-center p-3 sm:p-4 rounded-lg group transition-all duration-300 ease-in-out bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 dark:hover:border-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
        <span class="flex-shrink-0 w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center text-lg sm:text-xl font-bold bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-100 group-hover:bg-gray-300 dark:group-hover:bg-gray-500 transition-colors duration-300">
          1
        </span>
        <div class="ml-4 flex-grow">
          <h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-gray-100 group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-300">
            Select Service
          </h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">Choose your desired service or treatment.</p>
        </div>
        <svg class="w-5 h-5 ml-auto text-gray-400 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors 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>

      <a href="#step-2" class="flex items-center p-3 sm:p-4 rounded-lg group transition-all duration-300 ease-in-out bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 dark:hover:border-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
        <span class="flex-shrink-0 w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center text-lg sm:text-xl font-bold bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-100 group-hover:bg-gray-300 dark:group-hover:bg-gray-500 transition-colors duration-300">
          2
        </span>
        <div class="ml-4 flex-grow">
          <h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-gray-100 group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-300">
            Pick Date & Time
          </h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">Find available slots that suit your schedule.</p>
        </div>
        <svg class="w-5 h-5 ml-auto text-gray-400 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors 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>

      <a href="#step-3" class="flex items-center p-3 sm:p-4 rounded-lg group transition-all duration-300 ease-in-out bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 dark:hover:border-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
        <span class="flex-shrink-0 w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center text-lg sm:text-xl font-bold bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-100 group-hover:bg-gray-300 dark:group-hover:bg-gray-500 transition-colors duration-300">
          3
        </span>
        <div class="ml-4 flex-grow">
          <h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-gray-100 group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-300">
            Your Details
          </h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">Provide contact and preference information.</p>
        </div>
        <svg class="w-5 h-5 ml-auto text-gray-400 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors 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>

      <a href="#step-4" class="flex items-center p-3 sm:p-4 rounded-lg group transition-all duration-300 ease-in-out bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 dark:hover:border-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
        <span class="flex-shrink-0 w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center text-lg sm:text-xl font-bold bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-100 group-hover:bg-gray-300 dark:group-hover:bg-gray-500 transition-colors duration-300">
          4
        </span>
        <div class="ml-4 flex-grow">
          <h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-gray-100 group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-300">
            Confirm Booking
          </h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">Review your reservation details and complete.</p>
        </div>
        <svg class="w-5 h-5 ml-auto text-gray-400 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors 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>
    </nav>
  </div>
</div>

3D_Music_TOC_Component

Un componente de tabla de contenido complejo, de alto contraste e inspirado en 3D para plataformas de música/audio, con diseño receptivo y compatibilidad con modo oscuro.

Abrir Vista previa

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-900 to-indigo-900 min-h-screen font-sans dark:from-gray-900 dark:to-black text-gray-100">

  <!-- Outer 3D Container -->
  <div class="max-w-6xl mx-auto backdrop-blur-sm bg-purple-800/30 dark:bg-gray-800/30 rounded-3xl p-4 sm:p-6 lg:p-10 shadow-[0_20px_50px_rgba(0,0,0,0.8)] relative overflow-hidden ring-2 ring-purple-500/50 dark:ring-gray-600/50">
    <!-- Decorative light aura -->
    <div class="absolute top-0 left-0 w-full h-full pointer-events-none rounded-3xl" style="background: radial-gradient(circle at 10% 10%, rgba(139, 92, 246, 0.2) 0%, transparent 50%), radial-gradient(circle at 90% 90%, rgba(239, 68, 68, 0.1) 0%, transparent 50%);"></div>

    <!-- Inner Content Area -->
    <div class="relative z-10">
      <header class="mb-8 text-center">
        <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold mb-2 text-white drop-shadow-[0_4px_3px_rgba(0,0,0,0.5)] leading-tight">
          <span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-300 via-pink-300 to-red-300">🎧 Playlists & Tracks 🎧</span>
        </h1>
        <p class="text-lg sm:text-xl text-purple-200 dark:text-gray-300 mb-6 drop-shadow-[0_2px_2px_rgba(0,0,0,0.4)]">
          Dive into a universe of sound. Explore our curated collections.
        </p>

        <!-- Search Bar with 3D Effect -->
        <div class="relative max-w-xl mx-auto group">
          <input type="text" placeholder="Search playlists or songs..." class="w-full p-3 pl-12 rounded-full bg-purple-700/60 dark:bg-gray-700/60 text-white placeholder-purple-200 dark:placeholder-gray-300 focus:outline-none focus:ring-4 focus:ring-purple-400/70 dark:focus:ring-gray-500/70 shadow-lg transition-all duration-300 transform perspective-1000 rotateX-0 group-hover:rotateX-5 group-hover:shadow-[0_15px_30px_rgba(0,0,0,0.6)]">
          <svg class="absolute left-4 top-1/2 -translate-y-1/2 w-6 h-6 text-purple-300 dark:text-gray-400" 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>
      </header>

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

        <!-- Left Sidebar: Categories/Genres (3D Elevated) -->
        <aside class="bg-purple-700/50 dark:bg-gray-700/50 rounded-2xl p-6 shadow-[0_10px_30px_rgba(0,0,0,0.5)] overflow-hidden relative group transform transition-transform duration-300 lg:hover:-translate-y-2 lg:hover:shadow-[0_20px_40px_rgba(0,0,0,0.7)] ring-1 ring-purple-600 dark:ring-gray-600">
          <h2 class="text-2xl font-bold mb-6 text-white border-b-2 border-purple-400 dark:border-gray-500 pb-2">Genres & Moods</h2>
          <ul class="space-y-4">
            <li class="relative">
              <a href="#" class="block p-4 rounded-xl bg-purple-600/70 dark:bg-gray-600/70 text-purple-100 dark:text-gray-200 font-semibold hover:bg-purple-500 dark:hover:bg-gray-500 transition duration-200 transform hover:scale-[1.02] active:scale-[0.98] shadow-[inset_0_2px_5px_rgba(0,0,0,0.3)] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_5px_15px_rgba(0,0,0,0.3)] ring-1 ring-purple-500 dark:ring-gray-500 flex items-center justify-between">
                <span><i class="fa-solid fa-compact-disc mr-3"></i>Pop Hits</span>
                <span class="text-xs bg-purple-800 dark:bg-gray-800 px-2 py-1 rounded-full">345</span>
              </a>
            </li>
            <li>
              <a href="#" class="block p-4 rounded-xl bg-purple-600/70 dark:bg-gray-600/70 text-purple-100 dark:text-gray-200 font-semibold hover:bg-purple-500 dark:hover:bg-gray-500 transition duration-200 transform hover:scale-[1.02] active:scale-[0.98] shadow-[inset_0_2px_5px_rgba(0,0,0,0.3)] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_5px_15px_rgba(0,0,0,0.3)] ring-1 ring-purple-500 dark:ring-gray-500 flex items-center justify-between">
                <span><i class="fa-solid fa-guitar mr-3"></i>Rock Anthems</span>
                 <span class="text-xs bg-purple-800 dark:bg-gray-800 px-2 py-1 rounded-full">210</span>
              </a>
            </li>
            <li>
              <a href="#" class="block p-4 rounded-xl bg-purple-600/70 dark:bg-gray-600/70 text-purple-100 dark:text-gray-200 font-semibold hover:bg-purple-500 dark:hover:bg-gray-500 transition duration-200 transform hover:scale-[1.02] active:scale-[0.98] shadow-[inset_0_2px_5px_rgba(0,0,0,0.3)] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_5px_15px_rgba(0,0,0,0.3)] ring-1 ring-purple-500 dark:ring-gray-500 flex items-center justify-between">
                <span><i class="fa-solid fa-headphones mr-3"></i>Electronic Vibes</span>
                 <span class="text-xs bg-purple-800 dark:bg-gray-800 px-2 py-1 rounded-full">188</span>
              </a>
            </li>
            <li>
              <a href="#" class="block p-4 rounded-xl bg-purple-600/70 dark:bg-gray-600/70 text-purple-100 dark:text-gray-200 font-semibold hover:bg-purple-500 dark:hover:bg-gray-500 transition duration-200 transform hover:scale-[1.02] active:scale-[0.98] shadow-[inset_0_2px_5px_rgba(0,0,0,0.3)] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_5px_15px_rgba(0,0,0,0.3)] ring-1 ring-purple-500 dark:ring-gray-500 flex items-center justify-between">
                <span><i class="fa-solid fa-microphone-alt mr-3"></i>Soulful R&B</span>
                 <span class="text-xs bg-purple-800 dark:bg-gray-800 px-2 py-1 rounded-full">120</span>
              </a>
            </li>
            <li>
              <a href="#" class="block p-4 rounded-xl bg-purple-600/70 dark:bg-gray-600/70 text-purple-100 dark:text-gray-200 font-semibold hover:bg-purple-500 dark:hover:bg-gray-500 transition duration-200 transform hover:scale-[1.02] active:scale-[0.98] shadow-[inset_0_2px_5px_rgba(0,0,0,0.3)] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_5px_15px_rgba(0,0,0,0.3)] ring-1 ring-purple-500 dark:ring-gray-500 flex items-center justify-between">
                <span><i class="fa-solid fa-drum mr-3"></i>Hip-Hop Grooves</span>
                 <span class="text-xs bg-purple-800 dark:bg-gray-800 px-2 py-1 rounded-full">98</span>
              </a>
            </li>
          </ul>

          <!-- Featured Artist (Mini-card) -->
          <div class="mt-8 p-4 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.02] relative z-10">
              <h3 class="text-lg font-bold text-white mb-3 flex items-center justify-center"><i class="fa-solid fa-star mr-2 text-yellow-400"></i>Featured Artist</h3>
              <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Artist Avatar" class="w-20 h-20 rounded-full mx-auto mb-3 border-4 border-purple-400 dark:border-gray-500 shadow-md object-cover">
              <p class="text-lg font-semibold text-purple-100 dark:text-gray-200">Lunar Tones</p>
              <a href="#" class="mt-3 inline-block bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 rounded-full text-sm font-bold shadow-md transition-all duration-200 transform active:scale-95">View Profile</a>
          </div>

        </aside>

        <!-- Main Content: Playlist Sections (Layered 3D Cards) -->
        <main class="lg:col-span-2 space-y-8">

          <!-- Recently Played -->
          <section class="p-6 bg-purple-700/50 dark:bg-gray-700/50 rounded-2xl shadow-[0_10px_30px_rgba(0,0,0,0.5)] relative group transform transition-transform duration-300 lg:hover:-translate-y-2 lg:hover:shadow-[0_20px_40px_rgba(0,0,0,0.7)] ring-1 ring-purple-600 dark:ring-gray-600">
            <h2 class="text-2xl font-bold mb-6 text-white border-b-2 border-purple-400 dark:border-gray-500 pb-2">Recently Played <i class="fa-solid fa-history ml-2"></i></h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
              <!-- Playlist Card 1 -->
              <div class="p-4 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.03] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
                <img src="https://picsum.photos/id/1040/300/200" alt="Playlist Cover" class="w-full h-32 object-cover rounded-lg mb-3 shadow-md group-hover:shadow-lg transition-shadow duration-200">
                <h3 class="text-lg font-semibold text-white mb-1">Chill Lofi Jams</h3>
                <p class="text-sm text-purple-200 dark:text-gray-300">45 tracks</p>
                <button class="mt-3 bg-pink-600 hover:bg-pink-700 text-white px-5 py-2 rounded-full font-bold shadow-md transform transition-all duration-200 active:scale-95"><i class="fa-solid fa-play mr-2"></i>Play</button>
              </div>
              <!-- Playlist Card 2 -->
              <div class="p-4 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.03] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
                <img src="https://picsum.photos/id/1043/300/200" alt="Playlist Cover" class="w-full h-32 object-cover rounded-lg mb-3 shadow-md group-hover:shadow-lg transition-shadow duration-200">
                <h3 class="text-lg font-semibold text-white mb-1">Workout Energy</h3>
                <p class="text-sm text-purple-200 dark:text-gray-300">60 tracks</p>
                <button class="mt-3 bg-pink-600 hover:bg-pink-700 text-white px-5 py-2 rounded-full font-bold shadow-md transform transition-all duration-200 active:scale-95"><i class="fa-solid fa-play mr-2"></i>Play</button>
              </div>
              <!-- Playlist Card 3 -->
              <div class="p-4 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.03] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
                <img src="https://picsum.photos/id/1045/300/200" alt="Playlist Cover" class="w-full h-32 object-cover rounded-lg mb-3 shadow-md group-hover:shadow-lg transition-shadow duration-200">
                <h3 class="text-lg font-semibold text-white mb-1">Morning Acoustic</h3>
                <p class="text-sm text-purple-200 dark:text-gray-300">30 tracks</p>
                <button class="mt-3 bg-pink-600 hover:bg-pink-700 text-white px-5 py-2 rounded-full font-bold shadow-md transform transition-all duration-200 active:scale-95"><i class="fa-solid fa-play mr-2"></i>Play</button>
              </div>
            </div>
          </section>

          <!-- New Releases -->
          <section class="p-6 bg-purple-700/50 dark:bg-gray-700/50 rounded-2xl shadow-[0_10px_30px_rgba(0,0,0,0.5)] relative group transform transition-transform duration-300 lg:hover:-translate-y-2 lg:hover:shadow-[0_20px_40px_rgba(0,0,0,0.7)] ring-1 ring-purple-600 dark:ring-gray-600">
            <h2 class="text-2xl font-bold mb-6 text-white border-b-2 border-purple-400 dark:border-gray-500 pb-2">New Releases <i class="fa-solid fa-fire ml-2 text-orange-400"></i></h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
              <!-- Album Card 1 -->
              <div class="p-4 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.03] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
                <img src="https://picsum.photos/id/1025/300/200" alt="Album Cover" class="w-full h-32 object-cover rounded-lg mb-3 shadow-md group-hover:shadow-lg transition-shadow duration-200">
                <h3 class="text-lg font-semibold text-white mb-1">City Lights</h3>
                <p class="text-sm text-purple-200 dark:text-gray-300">By Starlight Echoes</p>
                <button class="mt-3 bg-indigo-500 hover:bg-indigo-600 text-white px-5 py-2 rounded-full font-bold shadow-md transform transition-all duration-200 active:scale-95"><i class="fa-solid fa-eye mr-2"></i>Listen</button>
              </div>
              <!-- Album Card 2 -->
              <div class="p-4 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.03] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
                <img src="https://picsum.photos/id/1029/300/200" alt="Album Cover" class="w-full h-32 object-cover rounded-lg mb-3 shadow-md group-hover:shadow-lg transition-shadow duration-200">
                <h3 class="text-lg font-semibold text-white mb-1">Oceanic Depths</h3>
                <p class="text-sm text-purple-200 dark:text-gray-300">By Aqua Waves</p>
                <button class="mt-3 bg-indigo-500 hover:bg-indigo-600 text-white px-5 py-2 rounded-full font-bold shadow-md transform transition-all duration-200 active:scale-95"><i class="fa-solid fa-eye mr-2"></i>Listen</button>
              </div>
                <!-- Album Card 3 -->
              <div class="p-4 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.03] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
                <img src="https://picsum.photos/id/1031/300/200" alt="Album Cover" class="w-full h-32 object-cover rounded-lg mb-3 shadow-md group-hover:shadow-lg transition-shadow duration-200">
                <h3 class="text-lg font-semibold text-white mb-1">Forest Whispers</h3>
                <p class="text-sm text-purple-200 dark:text-gray-300">By Green Groove</p>
                <button class="mt-3 bg-indigo-500 hover:bg-indigo-600 text-white px-5 py-2 rounded-full font-bold shadow-md transform transition-all duration-200 active:scale-95"><i class="fa-solid fa-eye mr-2"></i>Listen</button>
              </div>
            </div>
          </section>

          <!-- Popular Artists -->
          <section class="p-6 bg-purple-700/50 dark:bg-gray-700/50 rounded-2xl shadow-[0_10px_30px_rgba(0,0,0,0.5)] relative group transform transition-transform duration-300 lg:hover:-translate-y-2 lg:hover:shadow-[0_20px_40px_rgba(0,0,0,0.7)] ring-1 ring-purple-600 dark:ring-gray-600">
            <h2 class="text-2xl font-bold mb-6 text-white border-b-2 border-purple-400 dark:border-gray-500 pb-2">Popular Artists <i class="fa-solid fa-users ml-2"></i></h2>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
              <!-- Artist Card 1 -->
              <a href="#" class="block p-3 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.05] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
                <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Artist Avatar" class="w-24 h-24 rounded-full mx-auto mb-3 border-4 border-pink-400 dark:border-gray-500 shadow-md object-cover group-hover:border-pink-500 transition-colors duration-200">
                <p class="text-lg font-semibold text-white">Eleanor Ray</p>
                <p class="text-sm text-purple-200 dark:text-gray-300">Pop/R&B</p>
              </a>
              <!-- Artist Card 2 -->
              <a href="#" class="block p-3 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.05] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
                <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Artist Avatar" class="w-24 h-24 rounded-full mx-auto mb-3 border-4 border-pink-400 dark:border-gray-500 shadow-md object-cover group-hover:border-pink-500 transition-colors duration-200">
                <p class="text-lg font-semibold text-white">Jaxson Cole</p>
                <p class="text-sm text-purple-200 dark:text-gray-300">Hip-Hop</p>
              </a>
              <!-- Artist Card 3 -->
              <a href="#" class="block p-3 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.05] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
                <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Artist Avatar" class="w-24 h-24 rounded-full mx-auto mb-3 border-4 border-pink-400 dark:border-gray-500 shadow-md object-cover group-hover:border-pink-500 transition-colors duration-200">
                <p class="text-lg font-semibold text-white">Seraphina</p>
                <p class="text-sm text-purple-200 dark:text-gray-300">Electronic</p>
              </a>
              <!-- Artist Card 4 -->
              <a href="#" class="block p-3 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.05] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
                <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="Artist Avatar" class="w-24 h-24 rounded-full mx-auto mb-3 border-4 border-pink-400 dark:border-gray-500 shadow-md object-cover group-hover:border-pink-500 transition-colors duration-200">
                <p class="text-lg font-semibold text-white">Rhythmic Soul</p>
                <p class="text-sm text-purple-200 dark:text-gray-300">Jazz/Funk</p>
              </a>
            </div>
          </section>

        </main>
      </div>

      <!-- Footer for additional navigation or info -->
      <footer class="mt-12 text-center text-purple-200 dark:text-gray-400 border-t border-purple-500/50 dark:border-gray-600/50 pt-8">
        <p class="text-sm mb-4">© 2023 AudioVerse. All rights reserved.</p>
        <nav class="space-x-4">
          <a href="#" class="hover:text-purple-100 dark:hover:text-white transition-colors duration-200 text-sm">About</a>
          <a href="#" class="hover:text-purple-100 dark:hover:text-white transition-colors duration-200 text-sm">Contact</a>
          <a href="#" class="hover:text-purple-100 dark:hover:text-white transition-colors duration-200 text-sm">Privacy</a>
        </nav>
      </footer>

    </div>
  </div>

  <!-- Font Awesome for Icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

  <!-- Custom Styles for 3D Transform Properties (Tailwind can't do arbitrary transforms directly) -->
  <style>
    .perspective-1000 {
      perspective: 1000px;
    }
    .rotateX-0 {
      transform: rotateX(0deg);
    }
    .rotateX-5 {
      transform: rotateX(5deg);
    }

    /* Dark mode toggle - For demonstration only, typically handled by JS */
    .dark-mode-toggle {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: #6d28d9;
      color: white;
      padding: 10px 15px;
      border-radius: 9999px;
      cursor: pointer;
      font-size: 0.875rem;
      z-index: 1000;
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
      transition: background-color 0.2s ease-in-out;
    }
    .dark-mode-toggle.dark-mode {
      background-color: #4b5563;
    }
  </style>
  <script>
    // This JavaScript is for dark mode toggle functionality demonstration only.
    // In a real application, consider using localStorage and a more robust approach.
    document.addEventListener('DOMContentLoaded', () => {
      const toggleBtn = document.createElement('button');
      toggleBtn.className = 'dark-mode-toggle';
      toggleBtn.innerHTML = '<i class="fas fa-moon"></i> Dark Mode';
      document.body.appendChild(toggleBtn);

      function applyTheme(theme) {
        if (theme === 'dark') {
          document.documentElement.classList.add('dark');
          toggleBtn.innerHTML = '<i class="fas fa-sun"></i> Light Mode';
          toggleBtn.classList.add('dark-mode');
        } else {
          document.documentElement.classList.remove('dark');
          toggleBtn.innerHTML = '<i class="fas fa-moon"></i> Dark Mode';
          toggleBtn.classList.remove('dark-mode');
        }
      }

      // Check local storage for theme preference
      const currentTheme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
      applyTheme(currentTheme);

      toggleBtn.addEventListener('click', () => {
        let theme = '';
        if (document.documentElement.classList.contains('dark')) {
          theme = 'light';
        } else {
          theme = 'dark';
        }
        localStorage.setItem('theme', theme);
        applyTheme(theme);
      });
    });
  </script>

</div>

Componente de tabla de contenido

Un componente de tabla de contenido limpio, minimalista y receptivo inspirado en la tipografía suiza/internacional, diseñado para sitios de documentación y base de conocimientos, con colores neutros cálidos y soporte completo para el modo oscuro.

Abrir Vista previa

                <div class="font-sans antialiased text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-900 leading-normal tracking-wider">

  <div class="max-w-xs md:max-w-sm lg:max-w-md mx-auto p-4 md:p-6 lg:p-8 rounded-lg shadow-lg bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
    <h3 class="text-lg md:text-xl lg:text-2xl font-bold mb-4 md:mb-6 text-gray-900 dark:text-gray-100 uppercase tracking-widest border-b border-gray-300 dark:border-gray-600 pb-2">
      Contents
    </h3>
    <nav aria-label="Table of Contents">
      <ul class="space-y-2 text-sm md:text-base lg:text-lg">
        <li>
          <a href="#introduction" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
            <span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">1. Introduction</span>
          </a>
        </li>
        <li>
          <a href="#getting-started" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
            <span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">2. Getting Started</span>
          </a>
          <ul class="ml-4 md:ml-6 mt-2 space-y-1">
            <li>
              <a href="#installation" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-600 dark:text-gray-400">
                2.1. Installation Guide
              </a>
            </li>
            <li>
              <a href="#basic-setup" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-600 dark:text-gray-400">
                2.2. Basic Setup
              </a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#core-concepts" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
            <span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">3. Core Concepts</span>
          </a>
        </li>
        <li>
          <a href="#advanced-topics" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
            <span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">4. Advanced Topics</span>
          </a>
          <ul class="ml-4 md:ml-6 mt-2 space-y-1">
            <li>
              <a href="#customization" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-600 dark:text-gray-400">
                4.1. Customization
              </a>
            </li>
            <li>
              <a href="#integrations" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-600 dark:text-gray-400">
                4.2. Integrations and APIs
              </a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#troubleshooting" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
            <span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">5. Troubleshooting</span>
          </a>
        </li>
        <li>
          <a href="#faq" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
            <span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">6. FAQ</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>

</div>

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>