Composant de table des matières 3D
Un composant de table des matières réactif conçu pour le commerce électronique, avec des éléments de conception 3D et une palette de couleurs complémentaire. Il comprend des éléments interactifs et prend en charge le mode sombre.
HTML Code
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6">
<h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Table of Contents</h1>
<ul class="space-y-4">
<li class="relative transition-transform transform hover:scale-105">
<div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
<img src="https://picsum.photos/50/50" alt="Item 1" class="w-12 h-12 rounded-full mr-3">
<span class="font-semibold text-gray-800 dark:text-white">Item 1: Introduction</span>
</div>
</li>
<li class="relative transition-transform transform hover:scale-105">
<div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
<img src="https://picsum.photos/50/50?random=1" alt="Item 2" class="w-12 h-12 rounded-full mr-3">
<span class="font-semibold text-gray-800 dark:text-white">Item 2: Features</span>
</div>
</li>
<li class="relative transition-transform transform hover:scale-105">
<div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
<img src="https://picsum.photos/50/50?random=2" alt="Item 3" class="w-12 h-12 rounded-full mr-3">
<span class="font-semibold text-gray-800 dark:text-white">Item 3: Pricing</span>
</div>
</li>
<li class="relative transition-transform transform hover:scale-105">
<div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
<img src="https://picsum.photos/50/50?random=3" alt="Item 4" class="w-12 h-12 rounded-full mr-3">
<span class="font-semibold text-gray-800 dark:text-white">Item 4: Support</span>
</div>
</li>
<li class="relative transition-transform transform hover:scale-105">
<div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
<img src="https://picsum.photos/50/50?random=4" alt="Item 5" class="w-12 h-12 rounded-full mr-3">
<span class="font-semibold text-gray-800 dark:text-white">Item 5: FAQ</span>
</div>
</li>
</ul>
</div>Composants associés
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.
Composant de la table des matières
Un composant de table des matières réactif conçu selon les principes de Material Design à l’aide de Tailwind CSS, prenant en charge le mode sombre et proposant des images et des avatars de repère.
Composant de la table des matières
Un composant simple de la table des matières conçu dans le style Material Design, utilisant des tons de terre et prenant en charge le mode sombre. Convient pour la consommation de contenu dans les blogs.