Composant de la table des matières
Un composant de table des matières propre, minimaliste et réactif inspiré de la typographie suisse/internationale, conçu pour la documentation et les sites de base de connaissances, avec des couleurs neutres chaudes et une prise en charge complète du mode sombre.
HTML Code
<div class="font-sans antialiased text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-900 leading-normal tracking-wider">
<div class="max-w-xs md:max-w-sm lg:max-w-md mx-auto p-4 md:p-6 lg:p-8 rounded-lg shadow-lg bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
<h3 class="text-lg md:text-xl lg:text-2xl font-bold mb-4 md:mb-6 text-gray-900 dark:text-gray-100 uppercase tracking-widest border-b border-gray-300 dark:border-gray-600 pb-2">
Contents
</h3>
<nav aria-label="Table of Contents">
<ul class="space-y-2 text-sm md:text-base lg:text-lg">
<li>
<a href="#introduction" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
<span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">1. Introduction</span>
</a>
</li>
<li>
<a href="#getting-started" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
<span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">2. Getting Started</span>
</a>
<ul class="ml-4 md:ml-6 mt-2 space-y-1">
<li>
<a href="#installation" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-600 dark:text-gray-400">
2.1. Installation Guide
</a>
</li>
<li>
<a href="#basic-setup" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-600 dark:text-gray-400">
2.2. Basic Setup
</a>
</li>
</ul>
</li>
<li>
<a href="#core-concepts" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
<span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">3. Core Concepts</span>
</a>
</li>
<li>
<a href="#advanced-topics" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
<span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">4. Advanced Topics</span>
</a>
<ul class="ml-4 md:ml-6 mt-2 space-y-1">
<li>
<a href="#customization" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-600 dark:text-gray-400">
4.1. Customization
</a>
</li>
<li>
<a href="#integrations" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-600 dark:text-gray-400">
4.2. Integrations and APIs
</a>
</li>
</ul>
</li>
<li>
<a href="#troubleshooting" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
<span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">5. Troubleshooting</span>
</a>
</li>
<li>
<a href="#faq" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
<span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">6. FAQ</span>
</a>
</li>
</ul>
</nav>
</div>
</div>Composants associés
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.
Bonbons rétro Table des matières
Un composant de table des matières à thème rétro nostalgique avec une palette de couleurs inspirée des bonbons, adapté aux sites Web d’alimentation et de restaurants. Dispose d’une navigation de type barre latérale « collante » avec des indicateurs de défilement fluides et la prise en charge du mode sombre.
Composant de la table des matières
Un composant de table des matières réactif conçu dans le style Glassmorphism, avec des éléments translucides givrés ressemblant à du verre avec des effets de flou, prenant en charge les thèmes clairs et sombres avec Tailwind CSS.