CCHub Logo CCHub Tailwind Collection
Komponenten Inhaltsverzeichnis Komponente "Inhaltsverzeichnis"

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

HTML-Code 

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

Verwandte Komponenten

Inhaltsverzeichnis Komponente 34

Eine reaktionsschnelle Inhaltsverzeichnis-Komponente, die mit Material Design gestaltet ist, Unterstützung für dunkle Designs bietet und Tailwind CSS verwendet.

Offen

Monospace_Developer_TOC

Eine komplexe, reaktionsschnelle Inhaltsverzeichniskomponente mit Monospace-/Entwickler-Ästhetik und juwelenfarbenem Farbschema, optimiert für Dokumentations- und Wissensdatenbank-Websites, mit Unterstützung für den Dunkelmodus.

Offen

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