CCHub Logo CCHub Tailwind Collection
Komponenten Inhaltsverzeichnis Komponente "Inhaltsverzeichnis"

Komponente "Inhaltsverzeichnis"

Eine reaktionsschnelle Inhaltsverzeichnis-Komponente, die im UI-Stil des Dunkelmodus gestaltet wurde und Abschnitte, Titel, Beschreibungen und zufällige Bilder/Avatare enthält.

Vorschau

HTML-Code 

<div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4">Table of Contents</h2>
    <ul class="space-y-3">
        <li class="hover:bg-gray-800 rounded p-2 transition duration-300">
            <h3 class="font-semibold">Section 1</h3>
            <p class="text-gray-400">Description of Section 1</p>
            <img src="https://picsum.photos/200/100?random=1" alt="Random Image" class="mt-2 rounded" />
        </li>
        <li class="hover:bg-gray-800 rounded p-2 transition duration-300">
            <h3 class="font-semibold">Section 2</h3>
            <p class="text-gray-400">Description of Section 2</p>
            <img src="https://picsum.photos/200/100?random=2" alt="Random Image" class="mt-2 rounded" />
        </li>
        <li class="hover:bg-gray-800 rounded p-2 transition duration-300">
            <h3 class="font-semibold">Section 3</h3>
            <p class="text-gray-400">Description of Section 3</p>
            <img src="https://picsum.photos/200/100?random=3" alt="Random Image" class="mt-2 rounded" />
        </li>
    </ul>
    <div class="mt-5 border-t border-gray-700 pt-4">
        <h4 class="font-semibold">Author</h4>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3" />
            <span class="text-gray-400">John Doe</span>
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente "Inhaltsverzeichnis"

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

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

Komponente "Inhaltsverzeichnis"

Responsive Inhaltsverzeichniskomponente mit Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS. Die Komponente ist für einen Portfoliozweck konzipiert und zeichnet sich durch ein monochromatisches Farbschema und einen moderaten Komplexitätsgrad ohne JavaScript aus.

Offen