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 conçu pour le mode sombre, avec des sections avec des titres et des espaces réservés pour les images et les avatars.
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.
Composant de la table des matières - Réservation/Réservation
Un composant de table des matières simple et réactif pour les systèmes de réservation, avec des couleurs en niveaux de gris et des transitions de dégradé subtiles. Inclut la prise en charge du mode sombre.