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 table des matières 3D
Un composant de table des matières réactif conçu pour le commerce électronique, avec des éléments de conception 3D et une palette de couleurs complémentaire. Il comprend des éléments interactifs et prend en charge le mode sombre.
Bauhaus Medical Table des matières
Un composant de table des matières complexe et réactif pour les applications médicales/de santé, doté d’un design fonctionnel inspiré du Bauhaus avec des couleurs sourdes et une prise en charge du mode sombre. Comprend des liens de navigation, de recherche et de section.
Composant de la table des matières
Composant de table des matières réactif avec conception Skeuomorphism, schéma de couleurs pastel et prise en charge du mode sombre, adapté aux portefeuilles.