Composant de la table des matières
Un composant de table des matières réactif conçu selon les principes de Material Design à l’aide de Tailwind CSS, prenant en charge le mode sombre et proposant des images et des avatars de repère.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Table of Contents</h2>
<ul class="space-y-2">
<li class="p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition ease-in-out duration-150">
<div class="flex items-center">
<img src="https://picsum.photos/40/40?random=1" alt="Avatar 1" class="rounded-full mr-3">
<a href="#section1" class="text-gray-700 dark:text-gray-200 hover:underline">Section 1: Introduction</a>
</div>
</li>
<li class="p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition ease-in-out duration-150">
<div class="flex items-center">
<img src="https://picsum.photos/40/40?random=2" alt="Avatar 2" class="rounded-full mr-3">
<a href="#section2" class="text-gray-700 dark:text-gray-200 hover:underline">Section 2: Getting Started</a>
</div>
</li>
<li class="p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition ease-in-out duration-150">
<div class="flex items-center">
<img src="https://picsum.photos/40/40?random=3" alt="Avatar 3" class="rounded-full mr-3">
<a href="#section3" class="text-gray-700 dark:text-gray-200 hover:underline">Section 3: Features</a>
</div>
</li>
<li class="p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition ease-in-out duration-150">
<div class="flex items-center">
<img src="https://picsum.photos/40/40?random=4" alt="Avatar 4" class="rounded-full mr-3">
<a href="#section4" class="text-gray-700 dark:text-gray-200 hover:underline">Section 4: Conclusion</a>
</div>
</li>
</ul>
</div>Composants associés
Composant de la table des matières
Un composant minimaliste de la table des matières conçu avec Tailwind CSS, avec des effets réactifs et la prise en charge des thèmes sombres.
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 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.