Composant de la table des matières
Un composant de table des matières réactif conçu dans le style Material Design avec prise en charge des tons de terre et des thèmes sombres pour les sites Web d’entreprise.
HTML Code
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Table of Contents</h2>
<ul class="mt-4 space-y-2">
<li class="flex items-center">
<img src="https://i.pravatar.cc/40" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<a href="#section1" class="text-gray-700 dark:text-gray-300 hover:underline">Section 1</a>
</li>
<li class="flex items-center">
<img src="https://i.pravatar.cc/41" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<a href="#section2" class="text-gray-700 dark:text-gray-300 hover:underline">Section 2</a>
</li>
<li class="flex items-center">
<img src="https://i.pravatar.cc/42" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<a href="#section3" class="text-gray-700 dark:text-gray-300 hover:underline">Section 3</a>
</li>
<li class="flex items-center">
<img src="https://i.pravatar.cc/43" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<a href="#section4" class="text-gray-700 dark:text-gray-300 hover:underline">Section 4</a>
</li>
</ul>
</div>
<div class="bg-gray-200 dark:bg-gray-900 p-6 mt-6 rounded-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Additional Resources</h3>
<ul class="mt-2 space-y-1">
<li>
<a href="#resource1" class="text-gray-600 dark:text-gray-400 hover:underline">Resource 1</a>
</li>
<li>
<a href="#resource2" class="text-gray-600 dark:text-gray-400 hover:underline">Resource 2</a>
</li>
<li>
<a href="#resource3" class="text-gray-600 dark:text-gray-400 hover:underline">Resource 3</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 avec des éléments skeuomorphes et des tons de terre pour une vitrine de portfolio, avec prise en charge du mode sombre.
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 minimaliste et réactif doté d’un style CSS Tailwind, prenant en charge le mode sombre et présentant des éléments de conception épurés.