CCHub Logo CCHub Tailwind Collection
Komponenten Inhaltsverzeichnis Komponente "Inhaltsverzeichnis"

Komponente "Inhaltsverzeichnis"

Eine reaktionsschnelle Inhaltsverzeichnis-Komponente, die im Glassmorphism-Stil gestaltet wurde, mit mattglasähnlichen, durchscheinenden Elementen mit Unschärfeeffekten, die sowohl helle als auch dunkle Themen mit Tailwind CSS unterstützen.

Vorschau

HTML-Code 

<div class="bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-60 backdrop-blur-lg border border-gray-300 dark:border-gray-600 rounded-lg p-6 shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Table of Contents</h2>
    <ul class="mt-4 space-y-3">
        <li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
            <a href="#section1" class="text-gray-800 dark:text-white">Section 1: Introduction</a>
        </li>
        <li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
            <a href="#section2" class="text-gray-800 dark:text-white">Section 2: Features</a>
        </li>
        <li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
            <a href="#section3" class="text-gray-800 dark:text-white">Section 3: Installation</a>
        </li>
        <li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
            <a href="#section4" class="text-gray-800 dark:text-white">Section 4: Usage</a>
        </li>
        <li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
            <a href="#section5" class="text-gray-800 dark:text-white">Section 5: Conclusion</a>
        </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 minimalistische Inhaltsverzeichnis-Komponente, die mit Tailwind CSS entworfen wurde, mit responsiven Effekten und Unterstützung für dunkle Themen.

Offen

Inhaltsverzeichnis

Inhaltsverzeichnis Komponente mit Mikrointeraktionsdesign, analogem Farbschema, einfacher Komplexität und Social-Media-Zweck. Reaktionsschnell mit Unterstützung für dunkle Themen. Kein JavaScript-Code.

Offen