Composant de la table des matières
Un composant de table des matières réactif conçu pour le mode sombre, avec des sections avec des titres et des espaces réservés pour les images et les avatars.
HTML Code
<div class="bg-gray-900 text-white min-h-screen p-5">
<h1 class="text-3xl font-bold mb-4">Table of Contents</h1>
<ul class="space-y-4">
<li class="bg-gray-800 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-200">
<div class="flex items-center">
<img src="https://picsum.photos/50" alt="Placeholder Image" class="rounded-full mr-3">
<h2 class="text-xl font-semibold">Section 1</h2>
</div>
<p class="mt-2 text-gray-400">Description for section 1 goes here. It can contain an overview or an introduction.</p>
</li>
<li class="bg-gray-800 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-200">
<div class="flex items-center">
<img src="https://picsum.photos/50" alt="Placeholder Image" class="rounded-full mr-3">
<h2 class="text-xl font-semibold">Section 2</h2>
</div>
<p class="mt-2 text-gray-400">Description for section 2 goes here. It can contain an overview or an introduction.</p>
</li>
<li class="bg-gray-800 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-200">
<div class="flex items-center">
<img src="https://picsum.photos/50" alt="Placeholder Image" class="rounded-full mr-3">
<h2 class="text-xl font-semibold">Section 3</h2>
</div>
<p class="mt-2 text-gray-400">Description for section 3 goes here. It can contain an overview or an introduction.</p>
</li>
<li class="bg-gray-800 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-200">
<div class="flex items-center">
<img src="https://picsum.photos/50" alt="Placeholder Image" class="rounded-full mr-3">
<h2 class="text-xl font-semibold">Section 4</h2>
</div>
<p class="mt-2 text-gray-400">Description for section 4 goes here. It can contain an overview or an introduction.</p>
</li>
</ul>
</div>Composants associés
Bauhaus_Retro_Photography_TOC
Un composant de table des matières complexe et réactif pour les sites Web de photographie, inspiré des principes de conception du Bauhaus et d’une palette de couleurs rétro/vintage. Comprend des formes géométriques, des couleurs sourdes et une prise en charge complète du mode sombre, idéal pour les galeries de photos et les portfolios.
Table des matières
Composant de table des matières avec conception de micro-interactions, schéma de couleurs analogue, complexité simple et objectif de médias sociaux. Réactif avec prise en charge du thème sombre. Pas de code JavaScript.
Bauhaus Medical Table des matières
Un composant de table des matières complexe et réactif pour les applications médicales/de santé, doté d’un design fonctionnel inspiré du Bauhaus avec des couleurs sourdes et une prise en charge du mode sombre. Comprend des liens de navigation, de recherche et de section.