CCHub Logo CCHub Tailwind Collection
Komponenten Inhaltsverzeichnis Komponente "Inhaltsverzeichnis"

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.

Vorschau

HTML-Code 

<nav class="p-4 bg-gray-900 text-stone-200 min-h-screen dark:bg-gray-900">
  <h2 class="text-xl font-bold mb-4 text-stone-100">Table of Contents</h2>
  <ul class="space-y-2">
    <li><a href="#section-1" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Introduction</a></li>
    <li><a href="#section-2" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Getting Started</a></li>
    <li><a href="#section-3" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">User Profiles</a></li>
    <li><a href="#section-4" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Creating Posts</a></li>
    <li><a href="#section-5" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Interacting with Content</a></li>
    <li><a href="#section-6" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Privacy Settings</a></li>
    <li><a href="#section-7" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Notifications</a></li>
    <li><a href="#section-8" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Troubleshooting</a></li>
  </ul>
</nav>

Verwandte Komponenten

3D_Music_TOC_Component

Eine komplexe, kontrastreiche, 3D-inspirierte Inhaltsverzeichniskomponente für Musik-/Audioplattformen mit responsivem Design und Unterstützung für den Dunkelmodus.

Offen

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.

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