CCHub Logo CCHub Tailwind Collection
Komponenten Inhaltsverzeichnis Komponente "Inhaltsverzeichnis"

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.

Vorschau

HTML-Code 

<div class="bg-gray-900 text-white min-h-screen p-5">
    <h1 class="text-3xl font-bold mb-4">Table of Contents</h1>
    <ul class="space-y-4">
        <li class="bg-gray-800 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-200">
            <div class="flex items-center">
                <img src="https://picsum.photos/50" alt="Placeholder Image" class="rounded-full mr-3">
                <h2 class="text-xl font-semibold">Section 1</h2>
            </div>
            <p class="mt-2 text-gray-400">Description for section 1 goes here. It can contain an overview or an introduction.</p>
        </li>
        <li class="bg-gray-800 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-200">
            <div class="flex items-center">
                <img src="https://picsum.photos/50" alt="Placeholder Image" class="rounded-full mr-3">
                <h2 class="text-xl font-semibold">Section 2</h2>
            </div>
            <p class="mt-2 text-gray-400">Description for section 2 goes here. It can contain an overview or an introduction.</p>
        </li>
        <li class="bg-gray-800 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-200">
            <div class="flex items-center">
                <img src="https://picsum.photos/50" alt="Placeholder Image" class="rounded-full mr-3">
                <h2 class="text-xl font-semibold">Section 3</h2>
            </div>
            <p class="mt-2 text-gray-400">Description for section 3 goes here. It can contain an overview or an introduction.</p>
        </li>
        <li class="bg-gray-800 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-200">
            <div class="flex items-center">
                <img src="https://picsum.photos/50" alt="Placeholder Image" class="rounded-full mr-3">
                <h2 class="text-xl font-semibold">Section 4</h2>
            </div>
            <p class="mt-2 text-gray-400">Description for section 4 goes here. It can contain an overview or an introduction.</p>
        </li>
    </ul>
</div>

Verwandte Komponenten

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

Komponente "Inhaltsverzeichnis"

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

Offen

Inhaltsverzeichnis

Eine reaktionsschnelle Inhaltsverzeichniskomponente im Glassmorphism-Stil mit mattglasähnlichen, durchscheinenden Elementen mit Unschärfeeffekten und Unterstützung für dunkle Themen. Enthält Abschnitte und Platzhalterbilder zur visuellen Darstellung.

Offen