Composant de la table des matières
Un composant simple de la table des matières conçu dans le style Material Design, utilisant des tons de terre et prenant en charge le mode sombre. Convient pour la consommation de contenu dans les blogs.
HTML Code
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-md mx-auto">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Table of Contents</h2>
<ul class="space-y-2">
<li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition duration-200">
<a href="#section1" class="block text-gray-800 dark:text-gray-200 p-3 rounded-md">1. Introduction</a>
</li>
<li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition duration-200">
<a href="#section2" class="block text-gray-800 dark:text-gray-200 p-3 rounded-md">2. Overview of the Topic</a>
</li>
<li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition duration-200">
<a href="#section3" class="block text-gray-800 dark:text-gray-200 p-3 rounded-md">3. In-Depth Analysis</a>
</li>
<li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition duration-200">
<a href="#section4" class="block text-gray-800 dark:text-gray-200 p-3 rounded-md">4. Conclusion</a>
</li>
</ul>
</div>Composants associés
3D_Music_TOC_Component
Un composant de table des matières complexe, à contraste élevé, inspiré de la 3D pour les plates-formes musicales/audio, doté d’un design réactif et d’une 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.
Composant de la table des matières
Un composant de table des matières réactif et compatible avec le mode sombre avec une palette de couleurs rétro/vintage, adapté aux plateformes de rencontres/sociales. Il présente une palette de couleurs sourdes et une navigation à défilement fluide.