CCHub Logo CCHub Tailwind Collection
Composants Table des matières Composant de la table des matières

Composant de la table des matières

Un composant de table des matières réactif pour les interfaces de médias sociaux, conçu avec une interface utilisateur en mode sombre utilisant des tons de terre et une mise en page simple. Il prend en charge le thème sombre en utilisant Tailwind CSS et est uniquement HTML sans JavaScript.

Aperçu

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>

Composants associés

Monospace_Developer_TOC

Un composant de table des matières complexe et réactif avec une esthétique monospace/développeur, une palette de couleurs de bijou, optimisé pour la documentation et les sites de base de connaissances, avec prise en charge du mode sombre.

Ouvrir

Composant de la table des matières

Un composant de table des matières réactif conçu dans le style Material Design avec prise en charge des tons de terre et des thèmes sombres pour les sites Web d’entreprise.

Ouvrir

Composant de la table des matières

Composant de table des matières réactif avec prise en charge du mode sombre à l’aide de Tailwind CSS. Le composant est conçu à des fins de portefeuille, avec un schéma de couleurs monochromatiques et un niveau de complexité modéré sans JavaScript.

Ouvrir