Komponenten suchen

Kategorien

Komponenten Inhaltsverzeichnis

Inhaltsverzeichnis

Navigationshilfe für lange Inhaltsseiten

Retro Candy Inhaltsverzeichnis

Ein nostalgisches Inhaltsverzeichnis im Retro-Stil mit einem von Süßigkeiten inspirierten Farbschema, das sich für Lebensmittel- und Restaurant-Websites eignet. Verfügt über eine "klebrige" Seitenleisten-ähnliche Navigation mit sanft scrollenden Anzeigen und Unterstützung für den Dunkelmodus.

Offen Vorschau

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

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

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

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

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

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

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

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

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

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

      </div>
    </main>

  </div>

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

</div>

Inhaltsverzeichnis Komponente - 3D Erdtöne

Eine komplexe, von 3D inspirierte Inhaltsverzeichniskomponente für Geschäfts- und Unternehmenswebsites mit Erdtönen und voller Reaktionsfähigkeit mit Unterstützung des Dunkelmodus. Entwickelt, um Tiefe und Engagement zu bieten.

Offen Vorschau

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

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

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

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

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

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

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

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

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

    </div>
  </div>

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

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

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

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

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

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

</div>

Komponente "Inhaltsverzeichnis"

Eine responsive Inhaltsverzeichniskomponente mit einem skeuomorphen Design, einem triadischen Farbschema und Unterstützung für dunkle Themen, die für Social-Media-Schnittstellen geeignet ist. Kein JavaScript, nur HTML und Tailwind CSS.

Offen Vorschau

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

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

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

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

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

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

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

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

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

    </ul>

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

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

  </div>

</div>

Komponente "Inhaltsverzeichnis"

Eine reaktionsschnelle Inhaltsverzeichniskomponente für Social-Media-Schnittstellen, die mit einer Benutzeroberfläche im Dunkelmodus mit Erdtönen und einem einfachen Layout gestaltet wurde. Es unterstützt dunkles Design mit Tailwind CSS und ist nur HTML ohne JavaScript.

Offen Vorschau

                <nav class="p-4 bg-gray-900 text-stone-200 min-h-screen dark:bg-gray-900">
  <h2 class="text-xl font-bold mb-4 text-stone-100">Table of Contents</h2>
  <ul class="space-y-2">
    <li><a href="#section-1" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Introduction</a></li>
    <li><a href="#section-2" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Getting Started</a></li>
    <li><a href="#section-3" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">User Profiles</a></li>
    <li><a href="#section-4" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Creating Posts</a></li>
    <li><a href="#section-5" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Interacting with Content</a></li>
    <li><a href="#section-6" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Privacy Settings</a></li>
    <li><a href="#section-7" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Notifications</a></li>
    <li><a href="#section-8" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Troubleshooting</a></li>
  </ul>
</nav>

Komponente "Inhaltsverzeichnis"

Responsive Inhaltsverzeichniskomponente mit Skeuomorphismus-Design, Pastell-Farbschema und Unterstützung für den Dunkelmodus, geeignet für Portfolios.

Offen Vorschau

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

Inhaltsverzeichnis

Inhaltsverzeichnis Komponente mit Mikrointeraktionsdesign, analogem Farbschema, einfacher Komplexität und Social-Media-Zweck. Reaktionsschnell mit Unterstützung für dunkle Themen. Kein JavaScript-Code.

Offen Vorschau

                <nav class="p-4 bg-gray-100 dark:bg-gray-800">
  <ul class="space-y-2">
    <li><a href="#section1" class="block py-2 px-4 text-gray-700 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out transform hover:scale-105">Section 1</a></li>
    <li><a href="#section2" class="block py-2 px-4 text-gray-700 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out transform hover:scale-105">Section 2</a></li>
    <li><a href="#section3" class="block py-2 px-4 text-gray-700 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out transform hover:scale-105">Section 3</a></li>
  </ul>
</nav>

Komponente "Inhaltsverzeichnis"

Eine reaktionsschnelle Inhaltsverzeichniskomponente im Material Design mit leuchtenden Farben, die sich für Blogs und den Konsum von Inhalten eignet, einschließlich Unterstützung für den Dunkelmodus und mehrere interaktive Elemente.

Offen Vorschau

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Table of Contents</h2>
    <ul class="space-y-3">
        <li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded p-2 transition duration-200">
            <a href="#section1" class="flex items-center text-gray-600 dark:text-gray-200">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3">
                <span class="font-medium">Section 1: Introduction</span>
            </a>
        </li>
        <li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded p-2 transition duration-200">
            <a href="#section2" class="flex items-center text-gray-600 dark:text-gray-200">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3">
                <span class="font-medium">Section 2: Features</span>
            </a>
        </li>
        <li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded p-2 transition duration-200">
            <a href="#section3" class="flex items-center text-gray-600 dark:text-gray-200">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3">
                <span class="font-medium">Section 3: Implementation</span>
            </a>
        </li>
        <li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded p-2 transition duration-200">
            <a href="#section4" class="flex items-center text-gray-600 dark:text-gray-200">
                <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3">
                <span class="font-medium">Section 4: Conclusion</span>
            </a>
        </li>
    </ul>
    <div class="mt-6">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Images</h3>
        <div class="grid grid-cols-2 gap-4 mt-2">
            <img src="https://picsum.photos/200/150?random=1" alt="Random Image 1" class="rounded-lg shadow">
            <img src="https://picsum.photos/200/150?random=2" alt="Random Image 2" class="rounded-lg shadow">
            <img src="https://picsum.photos/200/150?random=3" alt="Random Image 3" class="rounded-lg shadow">
            <img src="https://picsum.photos/200/150?random=4" alt="Random Image 4" class="rounded-lg shadow">
        </div>
    </div>
</div>

Komponente "Inhaltsverzeichnis"

Eine responsive Inhaltsverzeichnis-Komponente, die im Material Design-Stil mit Erdtönen und dunkler Designunterstützung für Geschäfts-/Unternehmenswebsites gestaltet wurde.

Offen Vorschau

                <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Table of Contents</h2>
    <ul class="mt-4 space-y-2">
        <li class="flex items-center">
            <img src="https://i.pravatar.cc/40" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <a href="#section1" class="text-gray-700 dark:text-gray-300 hover:underline">Section 1</a>
        </li>
        <li class="flex items-center">
            <img src="https://i.pravatar.cc/41" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <a href="#section2" class="text-gray-700 dark:text-gray-300 hover:underline">Section 2</a>
        </li>
        <li class="flex items-center">
            <img src="https://i.pravatar.cc/42" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <a href="#section3" class="text-gray-700 dark:text-gray-300 hover:underline">Section 3</a>
        </li>
        <li class="flex items-center">
            <img src="https://i.pravatar.cc/43" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <a href="#section4" class="text-gray-700 dark:text-gray-300 hover:underline">Section 4</a>
        </li>
    </ul>
</div>
<div class="bg-gray-200 dark:bg-gray-900 p-6 mt-6 rounded-lg">
    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Additional Resources</h3>
    <ul class="mt-2 space-y-1">
        <li>
            <a href="#resource1" class="text-gray-600 dark:text-gray-400 hover:underline">Resource 1</a>
        </li>
        <li>
            <a href="#resource2" class="text-gray-600 dark:text-gray-400 hover:underline">Resource 2</a>
        </li>
        <li>
            <a href="#resource3" class="text-gray-600 dark:text-gray-400 hover:underline">Resource 3</a>
        </li>
    </ul>
</div>

Komponente "3D-Inhaltsverzeichnis"

Eine reaktionsschnelle Inhaltsverzeichnis-Komponente, die für den E-Commerce entwickelt wurde, mit 3D-Designelementen und einem komplementären Farbschema. Es enthält interaktive Elemente und unterstützt den Dunkelmodus.

Offen Vorschau

                <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Table of Contents</h1>
    <ul class="space-y-4">
        <li class="relative transition-transform transform hover:scale-105">
            <div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
                <img src="https://picsum.photos/50/50" alt="Item 1" class="w-12 h-12 rounded-full mr-3">
                <span class="font-semibold text-gray-800 dark:text-white">Item 1: Introduction</span>
            </div>
        </li>
        <li class="relative transition-transform transform hover:scale-105">
            <div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
                <img src="https://picsum.photos/50/50?random=1" alt="Item 2" class="w-12 h-12 rounded-full mr-3">
                <span class="font-semibold text-gray-800 dark:text-white">Item 2: Features</span>
            </div>
        </li>
        <li class="relative transition-transform transform hover:scale-105">
            <div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
                <img src="https://picsum.photos/50/50?random=2" alt="Item 3" class="w-12 h-12 rounded-full mr-3">
                <span class="font-semibold text-gray-800 dark:text-white">Item 3: Pricing</span>
            </div>
        </li>
        <li class="relative transition-transform transform hover:scale-105">
            <div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
                <img src="https://picsum.photos/50/50?random=3" alt="Item 4" class="w-12 h-12 rounded-full mr-3">
                <span class="font-semibold text-gray-800 dark:text-white">Item 4: Support</span>
            </div>
        </li>
        <li class="relative transition-transform transform hover:scale-105">
            <div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
                <img src="https://picsum.photos/50/50?random=4" alt="Item 5" class="w-12 h-12 rounded-full mr-3">
                <span class="font-semibold text-gray-800 dark:text-white">Item 5: FAQ</span>
            </div>
        </li>
    </ul>
</div>

Komponente "Inhaltsverzeichnis"

Eine einfache Inhaltsverzeichnis-Komponente, die im Material Design-Stil gestaltet ist, Erdtöne verwendet und den Dunkelmodus unterstützt. Geeignet für den Konsum von Inhalten in Blogs.

Offen Vorschau

                <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-md mx-auto">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Table of Contents</h2>
    <ul class="space-y-2">
        <li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition duration-200">
            <a href="#section1" class="block text-gray-800 dark:text-gray-200 p-3 rounded-md">1. Introduction</a>
        </li>
        <li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition duration-200">
            <a href="#section2" class="block text-gray-800 dark:text-gray-200 p-3 rounded-md">2. Overview of the Topic</a>
        </li>
        <li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition duration-200">
            <a href="#section3" class="block text-gray-800 dark:text-gray-200 p-3 rounded-md">3. In-Depth Analysis</a>
        </li>
        <li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition duration-200">
            <a href="#section4" class="block text-gray-800 dark:text-gray-200 p-3 rounded-md">4. Conclusion</a>
        </li>
    </ul>
</div>