CCHub Logo CCHub Tailwind Collection
Komponenten Inhaltsverzeichnis Komponente "Inhaltsverzeichnis"

Komponente "Inhaltsverzeichnis"

Eine reaktionsschnelle Inhaltsverzeichnis-Komponente, die nach Material Design-Prinzipien unter Verwendung von Tailwind CSS gestaltet wurde, den Dunkelmodus unterstützt und Platzhalterbilder und Avatare enthält.

Vorschau

HTML-Code 

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Table of Contents</h2>
    <ul class="space-y-2">
        <li class="p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition ease-in-out duration-150">
            <div class="flex items-center">
                <img src="https://picsum.photos/40/40?random=1" alt="Avatar 1" class="rounded-full mr-3">
                <a href="#section1" class="text-gray-700 dark:text-gray-200 hover:underline">Section 1: Introduction</a>
            </div>
        </li>
        <li class="p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition ease-in-out duration-150">
            <div class="flex items-center">
                <img src="https://picsum.photos/40/40?random=2" alt="Avatar 2" class="rounded-full mr-3">
                <a href="#section2" class="text-gray-700 dark:text-gray-200 hover:underline">Section 2: Getting Started</a>
            </div>
        </li>
        <li class="p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition ease-in-out duration-150">
            <div class="flex items-center">
                <img src="https://picsum.photos/40/40?random=3" alt="Avatar 3" class="rounded-full mr-3">
                <a href="#section3" class="text-gray-700 dark:text-gray-200 hover:underline">Section 3: Features</a>
            </div>
        </li>
        <li class="p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition ease-in-out duration-150">
            <div class="flex items-center">
                <img src="https://picsum.photos/40/40?random=4" alt="Avatar 4" class="rounded-full mr-3">
                <a href="#section4" class="text-gray-700 dark:text-gray-200 hover:underline">Section 4: Conclusion</a>
            </div>
        </li>
    </ul>
</div>

Verwandte Komponenten

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

Inhaltsverzeichniskomponente - Buchung/Reservierung

Eine einfache, reaktionsschnelle Inhaltsverzeichniskomponente für Buchungs-/Reservierungssysteme mit Graustufenfarben und subtilen Farbverlaufsübergängen. Enthält Unterstützung für den Dunkelmodus.

Offen

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