CCHub Logo CCHub Tailwind Collection
Komponenten Inhaltsverzeichnis Komponente "Inhaltsverzeichnis"

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

HTML-Code 

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

Verwandte Komponenten

Komponente "Inhaltsverzeichnis"

Eine reaktionsschnelle Inhaltsverzeichnis-Komponente, die für den Dunkelmodus entwickelt wurde und Abschnitte mit Titeln und Platzhaltern für Bilder und Avatare enthält.

Offen

Bauhaus Medizin Inhaltsverzeichnis

Eine komplexe, reaktionsschnelle Inhaltsverzeichniskomponente für Anwendungen in der Medizin/im Gesundheitswesen mit einem vom Bauhaus inspirierten funktionalen Design mit gedämpften Farben und Unterstützung für den Dunkelmodus. Enthält Navigations-, Such- und Abschnittslinks.

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