CCHub Logo CCHub Tailwind Collection
Komponenten Inhaltsverzeichnis Retro Inhaltsverzeichnis

Retro Inhaltsverzeichnis

Responsive Inhaltsverzeichniskomponente mit Retro/Vintage-Design, analogem Farbschema und Unterstützung für den Dunkelmodus. Geeignet für Business-/Corporate-Websites. Verwendet Tailwind CSS ohne JavaScript.

Vorschau

HTML-Code 

<div class="bg-gray-200 dark:bg-gray-800 retro-analogous-colors p-6 rounded-lg shadow-lg">
  <h2 class="text-xl font-bold mb-4 dark:text-white">Table of Contents</h2>
  <ul class="space-y-2">
    <li><a href="#section-1" class="text-blue-800 dark:text-blue-300 hover:underline">Section 1: Introduction</a></li>
    <li><a href="#section-2" class="text-blue-800 dark:text-blue-300 hover:underline">Section 2: Getting Started</a></li>
    <li><a href="#section-3" class="text-blue-800 dark:text-blue-300 hover:underline">Section 3: Core Concepts</a></li>
    <li><a href="#section-4" class="text-blue-800 dark:text-blue-300 hover:underline">Section 4: Advanced Topics</a></li>
    <li><a href="#section-5" class="text-blue-800 dark:text-blue-300 hover:underline">Section 5: Conclusion</a></li>
  </ul>
</div>

<style>
  .retro-analogous-colors {
    /* Define your retro analogous colors here using Tailwind's custom colors or by extending the theme */
    /* Example (you would define these in your tailwind.config.js): */
    /* background-color: theme('colors.retro-light'); */
    /* color: theme('colors.retro-dark'); */
  }

  .dark .retro-analogous-colors {
     /* background-color: theme('colors.retro-dark'); */
     /* color: theme('colors.retro-light'); */
  }
</style>

Verwandte Komponenten

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.

Offen

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

Bauhaus_Retro_Photography_TOC

Eine komplexe, reaktionsschnelle Inhaltsverzeichniskomponente für Fotografie-Websites, inspiriert von Bauhaus-Designprinzipien und einer Retro-/Vintage-Farbpalette. Mit geometrischen Formen, gedämpften Farben und vollständiger Unterstützung des Dunkelmodus, ideal für Fotogalerien und Portfolios.

Offen