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.
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
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.
Glassmorphism_RealEstate_TableOfContents
Un composant de table des matières de style glassmorphism pour les annonces immobilières, avec des éléments translucides, des effets de flou et une palette de couleurs violette/violette. Il est réactif et prend en charge le mode sombre.
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.