Composant de la table des matières
Un composant de table des matières réactif stylisé avec Neumorphism à l’aide de Tailwind CSS, avec prise en charge du thème sombre et affichant des images et des avatars de remplacement.
HTML Code
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-md space-y-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Table of Contents</h2>
<ul class="space-y-2">
<li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<div class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
<a href="#section1" class="text-lg text-gray-800 dark:text-gray-200">Section 1</a>
</div>
</li>
<li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<div class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
<a href="#section2" class="text-lg text-gray-800 dark:text-gray-200">Section 2</a>
</div>
</li>
<li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<div class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
<a href="#section3" class="text-lg text-gray-800 dark:text-gray-200">Section 3</a>
</div>
</li>
<li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<div class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
<a href="#section4" class="text-lg text-gray-800 dark:text-gray-200">Section 4</a>
</div>
</li>
<li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<div class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
<a href="#section5" class="text-lg text-gray-800 dark:text-gray-200">Section 5</a>
</div>
</li>
</ul>
</div>Composants associés
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.
Table des matières Composant - Tons de terre 3D
Un composant complexe de table des matières inspiré de la 3D pour les sites Web d’entreprise et d’entreprise, avec des tons de terre et une réactivité totale avec prise en charge du mode sombre. Conçu pour offrir de la profondeur et de l’engagement.
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.