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.
HTML Code
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-md mx-auto">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Table of Contents</h2>
<ul class="space-y-2">
<li>
<a href="#section1" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
Section 1
</a>
</li>
<li>
<a href="#section2" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
Section 2
</a>
</li>
<li>
<a href="#section3" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
Section 3
</a>
</li>
<li>
<a href="#section4" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
Section 4
</a>
</li>
<li>
<a href="#section5" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
Section 5
</a>
</li>
</ul>
</div>Composants associés
Composant de la table des matières
Un composant de table des matières simple et réactif avec des effets de néon/lueur et une palette de couleurs d’automne, adapté aux portfolios ou aux galeries de photographie, y compris la prise en charge du mode sombre.
Composant de la table des matières
Un composant de table des matières réactif avec un design glassmorphism et une palette de couleurs pastel, adapté aux tableaux de bord avec visualisation de données et panneaux de contrôle.
Composant de la table des matières
Un composant de table des matières propre, minimaliste et réactif inspiré de la typographie suisse/internationale, conçu pour la documentation et les sites de base de connaissances, avec des couleurs neutres chaudes et une prise en charge complète du mode sombre.