Composant de la table des matières
Composant de table des matières réactif avec prise en charge du mode sombre à l’aide de Tailwind CSS. Le composant est conçu à des fins de portefeuille, avec un schéma de couleurs monochromatiques et un niveau de complexité modéré sans JavaScript.
HTML Code
<div class="bg-gray-900 text-gray-300 p-8 min-h-screen">
<div class="max-w-4xl mx-auto">
<h1 class="text-3xl font-bold text-white mb-8">Table of Contents</h1>
<div class="bg-gray-800 p-6 rounded-lg shadow-lg">
<ul class="space-y-4">
<li>
<a href="#section-1" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
<span class="font-semibold text-gray-300">Section 1:</span> Introduction
</a>
</li>
<li>
<a href="#section-2" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
<span class="font-semibold text-gray-300">Section 2:</span> About Me
</a>
<ul class="ml-6 mt-2 space-y-2">
<li>
<a href="#section-2-1" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
2.1 My Background
</a>
</li>
<li>
<a href="#section-2-2" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
2.2 Skills
</a>
</li>
</ul>
</li>
<li>
<a href="#section-3" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
<span class="font-semibold text-gray-300">Section 3:</span> My Work
</a>
<ul class="ml-6 mt-2 space-y-2">
<li>
<a href="#section-3-1" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
3.1 Project Alpha
</a>
</li>
<li>
<a href="#section-3-2" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
3.2 Project Beta
</a>
</li>
<li>
<a href="#section-3-3" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
3.3 Project Gamma
</a>
</li>
</ul>
</li>
<li>
<a href="#section-4" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
<span class="font-semibold text-gray-300">Section 4:</span> Contact
</a>
</li>
</ul>
</div>
</div>
</div>Composants associés
RetroEarthDashboardTOC
Composant de table des matières réactif avec un design rétro/vintage, une palette de couleurs de tons de terre et la prise en charge du mode sombre pour l’utilisation du tableau de bord.
Composant de la table des matières
Composant de table des matières réactif conçu dans le style de l’interface utilisateur du mode sombre, avec des sections, des titres, des descriptions et des images/avatars aléatoires.
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.