CCHub Logo CCHub Tailwind Collection
Komponenten Inhaltsverzeichnis Komponente "3D-Inhaltsverzeichnis"

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.

Vorschau

HTML-Code 

<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Table of Contents</h1>
    <ul class="space-y-4">
        <li class="relative transition-transform transform hover:scale-105">
            <div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
                <img src="https://picsum.photos/50/50" alt="Item 1" class="w-12 h-12 rounded-full mr-3">
                <span class="font-semibold text-gray-800 dark:text-white">Item 1: Introduction</span>
            </div>
        </li>
        <li class="relative transition-transform transform hover:scale-105">
            <div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
                <img src="https://picsum.photos/50/50?random=1" alt="Item 2" class="w-12 h-12 rounded-full mr-3">
                <span class="font-semibold text-gray-800 dark:text-white">Item 2: Features</span>
            </div>
        </li>
        <li class="relative transition-transform transform hover:scale-105">
            <div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
                <img src="https://picsum.photos/50/50?random=2" alt="Item 3" class="w-12 h-12 rounded-full mr-3">
                <span class="font-semibold text-gray-800 dark:text-white">Item 3: Pricing</span>
            </div>
        </li>
        <li class="relative transition-transform transform hover:scale-105">
            <div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
                <img src="https://picsum.photos/50/50?random=3" alt="Item 4" class="w-12 h-12 rounded-full mr-3">
                <span class="font-semibold text-gray-800 dark:text-white">Item 4: Support</span>
            </div>
        </li>
        <li class="relative transition-transform transform hover:scale-105">
            <div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
                <img src="https://picsum.photos/50/50?random=4" alt="Item 5" class="w-12 h-12 rounded-full mr-3">
                <span class="font-semibold text-gray-800 dark:text-white">Item 5: FAQ</span>
            </div>
        </li>
    </ul>
</div>

Verwandte Komponenten

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 Inhaltsverzeichnis-Komponente, die mit skeuomorphen Elementen und Erdtönen für eine Portfolio-Präsentation entworfen wurde, mit Unterstützung für den Dunkelmodus.

Offen

Glassmorphism_RealEstate_TableOfContents

Eine Inhaltsverzeichniskomponente im Glasmorphismus-Stil für Immobilienangebote mit durchscheinenden Elementen, Unschärfeeffekten und einem violetten/violetten Farbschema. Es reagiert und unterstützt den Dunkelmodus.

Offen