Inhaltsverzeichnis

Komponente "Inhaltsverzeichnis"

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

Vorschau öffnen

                <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 Komponente mit Mikrointeraktionsdesign, analogem Farbschema, einfacher Komplexität und Social-Media-Zweck. Reaktionsschnell mit Unterstützung für dunkle Themen. Kein JavaScript-Code.

Vorschau öffnen

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

Vorschau öffnen

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

Vorschau öffnen

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

Vorschau öffnen

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

Vorschau öffnen

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

Komponente "Inhaltsverzeichnis"

Eine reaktionsschnelle Inhaltsverzeichnis-Komponente, die mit skeuomorphen Elementen und Erdtönen für eine Portfolio-Präsentation entworfen wurde, mit Unterstützung für den Dunkelmodus.

Vorschau öffnen

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-semibold text-green-800 dark:text-green-200 mb-4">Table of Contents</h2>
    <ul class="space-y-4">
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section1" class="text-gray-800 dark:text-gray-200 font-semibold">Section 1</a>
        </li>
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section2" class="text-gray-800 dark:text-gray-200 font-semibold">Section 2</a>
        </li>
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section3" class="text-gray-800 dark:text-gray-200 font-semibold">Section 3</a>
        </li>
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section4" class="text-gray-800 dark:text-gray-200 font-semibold">Section 4</a>
        </li>
    </ul>
</div>

RetroEarthDashboardTOC

Responsive Inhaltsverzeichniskomponente mit Retro/Vintage-Design, Farbschema in Erdtönen und Unterstützung des Dunkelmodus für die Verwendung im Dashboard.

Vorschau öffnen

                <div class="bg-stone-100 dark:bg-stone-900 text-stone-800 dark:text-stone-200 p-6 rounded-lg shadow-lg font-mono">
  <h2 class="text-xl font-bold mb-4">Table of Contents</h2>
  <ul class="space-y-2">
    <li><a href="#section-1" class="hover:underline">1. Introduction</a></li>
    <li><a href="#section-2" class="hover:underline">2. Data Overview</a></li>
    <li>
      <a href="#section-3" class="hover:underline">3. Key Metrics</a>
      <ul class="ml-4 mt-1 space-y-1">
        <li><a href="#section-3-1" class="hover:underline">3.1. Sales Performance</a></li>
        <li><a href="#section-3-2" class="hover:underline">3.2. User Engagement</a></li>
      </ul>
    </li>
    <li><a href="#section-4" class="hover:underline">4. Conclusion</a></li>
  </ul>
</div>

Retro Inhaltsverzeichnis

Responsive Inhaltsverzeichniskomponente mit Retro/Vintage-Design, analogem Farbschema und Unterstützung für den Dunkelmodus. Geeignet für Business-/Corporate-Websites. Verwendet Tailwind CSS ohne JavaScript.

Vorschau öffnen

                <div class="bg-gray-200 dark:bg-gray-800 retro-analogous-colors p-6 rounded-lg shadow-lg">
  <h2 class="text-xl font-bold mb-4 dark:text-white">Table of Contents</h2>
  <ul class="space-y-2">
    <li><a href="#section-1" class="text-blue-800 dark:text-blue-300 hover:underline">Section 1: Introduction</a></li>
    <li><a href="#section-2" class="text-blue-800 dark:text-blue-300 hover:underline">Section 2: Getting Started</a></li>
    <li><a href="#section-3" class="text-blue-800 dark:text-blue-300 hover:underline">Section 3: Core Concepts</a></li>
    <li><a href="#section-4" class="text-blue-800 dark:text-blue-300 hover:underline">Section 4: Advanced Topics</a></li>
    <li><a href="#section-5" class="text-blue-800 dark:text-blue-300 hover:underline">Section 5: Conclusion</a></li>
  </ul>
</div>

<style>
  .retro-analogous-colors {
    /* Define your retro analogous colors here using Tailwind's custom colors or by extending the theme */
    /* Example (you would define these in your tailwind.config.js): */
    /* background-color: theme('colors.retro-light'); */
    /* color: theme('colors.retro-dark'); */
  }

  .dark .retro-analogous-colors {
     /* background-color: theme('colors.retro-dark'); */
     /* color: theme('colors.retro-light'); */
  }
</style>

Komponente "Inhaltsverzeichnis"

Eine reaktionsschnelle Inhaltsverzeichniskomponente mit einem Glasmorphismus-Design und einem pastellfarbenen Farbschema, das für Dashboards mit Datenvisualisierung und Bedienfeldern geeignet ist.

Vorschau öffnen

                <div class="flex flex-col items-center p-5 bg-white rounded-lg shadow-lg glassmorphism dark:bg-gray-800">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Table of Contents</h2>
    <ul class="w-full space-y-3">
        <li class="p-4 rounded-lg bg-white text-gray-700 shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-700 dark:text-gray-200"> 
            <a href="#section1">Section 1</a>
        </li>
        <li class="p-4 rounded-lg bg-white text-gray-700 shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-700 dark:text-gray-200">
            <a href="#section2">Section 2</a>
        </li>
        <li class="p-4 rounded-lg bg-white text-gray-700 shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-700 dark:text-gray-200">
            <a href="#section3">Section 3</a>
        </li>
        <li class="p-4 rounded-lg bg-white text-gray-700 shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-700 dark:text-gray-200">
            <a href="#section4">Section 4</a>
        </li>
        <li class="p-4 rounded-lg bg-white text-gray-700 shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-700 dark:text-gray-200">
            <a href="#section5">Section 5</a>
        </li>
    </ul>
    <div class="mt-6 w-full">
        <img src="https://picsum.photos/300/200" alt="Sample Image" class="w-full h-auto rounded-lg shadow-lg">
    </div>
    <div class="mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full shadow-lg">
        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">User Name</p>
    </div>
</div>

Kategorien

Inhaltsverzeichnis