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.
HTML Code
<div class="bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-60 backdrop-blur-lg border border-gray-300 dark:border-gray-600 rounded-lg p-6 shadow-lg max-w-md mx-auto">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">Table of Contents</h2>
<ul class="mt-4 space-y-3">
<li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
<a href="#section1" class="text-gray-800 dark:text-white">Section 1: Introduction</a>
</li>
<li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
<a href="#section2" class="text-gray-800 dark:text-white">Section 2: Features</a>
</li>
<li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
<a href="#section3" class="text-gray-800 dark:text-white">Section 3: Installation</a>
</li>
<li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
<a href="#section4" class="text-gray-800 dark:text-white">Section 4: Usage</a>
</li>
<li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
<a href="#section5" class="text-gray-800 dark:text-white">Section 5: Conclusion</a>
</li>
</ul>
</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.
Table des matières Composante 34
Un composant de table des matières réactif conçu avec Material Design, avec prise en charge du thème sombre et utilisant Tailwind CSS.
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.