Composants Table des matières RetroEarthDashboardTOC

RetroEarthDashboardTOC

Composant de table des matières réactif avec un design rétro/vintage, une palette de couleurs de tons de terre et la prise en charge du mode sombre pour l’utilisation du tableau de bord.

Aperçu

HTML Code

<div class="bg-stone-100 dark:bg-stone-900 text-stone-800 dark:text-stone-200 p-6 rounded-lg shadow-lg font-mono">
  <h2 class="text-xl font-bold mb-4">Table of Contents</h2>
  <ul class="space-y-2">
    <li><a href="#section-1" class="hover:underline">1. Introduction</a></li>
    <li><a href="#section-2" class="hover:underline">2. Data Overview</a></li>
    <li>
      <a href="#section-3" class="hover:underline">3. Key Metrics</a>
      <ul class="ml-4 mt-1 space-y-1">
        <li><a href="#section-3-1" class="hover:underline">3.1. Sales Performance</a></li>
        <li><a href="#section-3-2" class="hover:underline">3.2. User Engagement</a></li>
      </ul>
    </li>
    <li><a href="#section-4" class="hover:underline">4. Conclusion</a></li>
  </ul>
</div>

Composants associés

Composant de la table des matières

Un composant de table des matières réactif stylisé en Material Design avec des couleurs vives, adapté aux blogs et à la consommation de contenu, y compris la prise en charge du mode sombre et plusieurs éléments interactifs.

Ouvrir

Composant de la table des matières

Un composant de table des matières réactif conçu pour le mode sombre, avec des sections avec des titres et des espaces réservés pour les images et les avatars.

Ouvrir

Composant de la table des matières

Un composant de table des matières réactif avec un design skeuomorphe, une palette de couleurs triadique et une prise en charge du thème sombre, adapté aux interfaces de médias sociaux. Pas de JavaScript, seulement du HTML et du CSS Tailwind.

Ouvrir