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.
HTML Code
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg dark:shadow-xl">
<h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Table of Contents</h2>
<ul class="space-y-2">
<li>
<a href="#section1" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
<span class="font-semibold">Section 1: Introduction</span>
</a>
</li>
<li>
<a href="#section2" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
<span class="font-semibold">Section 2: Projects</span>
</a>
</li>
<li>
<a href="#section3" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
<span class="font-semibold">Section 3: Skills</span>
</a>
</li>
<li>
<a href="#section4" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
<span class="font-semibold">Section 4: Contact</span>
</a>
</li>
</ul>
</div>Composants associés
Glassmorphism_RealEstate_TableOfContents
Un composant de table des matières de style glassmorphism pour les annonces immobilières, avec des éléments translucides, des effets de flou et une palette de couleurs violette/violette. Il est réactif et prend en charge le mode sombre.
Table des matières rétro
Composant de table des matières réactif avec design rétro/vintage, schéma de couleurs analogue et prise en charge du mode sombre. Convient aux sites Web d’entreprise. Utilise Tailwind CSS sans JavaScript.
Composant de la table des matières
Un composant de table des matières réactif pour les interfaces de médias sociaux, conçu avec une interface utilisateur en mode sombre utilisant des tons de terre et une mise en page simple. Il prend en charge le thème sombre en utilisant Tailwind CSS et est uniquement HTML sans JavaScript.