Composants Table des matières Table des matières rétro

Table des matières rétro

Composant de table des matières réactif avec design rétro/vintage, schéma de couleurs analogue et prise en charge du mode sombre. Convient aux sites Web d’entreprise. Utilise Tailwind CSS sans JavaScript.

Aperçu

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>

Composants associés

Composant de la table des matières - Réservation/Réservation

Un composant de table des matières simple et réactif pour les systèmes de réservation, avec des couleurs en niveaux de gris et des transitions de dégradé subtiles. Inclut la prise en charge du mode sombre.

Ouvrir

3D_Music_TOC_Component

Un composant de table des matières complexe, à contraste élevé, inspiré de la 3D pour les plates-formes musicales/audio, doté d’un design réactif et d’une prise en charge du mode sombre.

Ouvrir

Bauhaus_Retro_Photography_TOC

Un composant de table des matières complexe et réactif pour les sites Web de photographie, inspiré des principes de conception du Bauhaus et d’une palette de couleurs rétro/vintage. Comprend des formes géométriques, des couleurs sourdes et une prise en charge complète du mode sombre, idéal pour les galeries de photos et les portfolios.

Ouvrir