Composant de la table des matières
Un composant de table des matières réactif avec un design glassmorphism et une palette de couleurs pastel, adapté aux tableaux de bord avec visualisation de données et panneaux de contrôle.
HTML Code
<div class="flex flex-col items-center p-5 bg-white rounded-lg shadow-lg glassmorphism dark:bg-gray-800">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Table of Contents</h2>
<ul class="w-full space-y-3">
<li class="p-4 rounded-lg bg-white text-gray-700 shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-700 dark:text-gray-200">
<a href="#section1">Section 1</a>
</li>
<li class="p-4 rounded-lg bg-white text-gray-700 shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-700 dark:text-gray-200">
<a href="#section2">Section 2</a>
</li>
<li class="p-4 rounded-lg bg-white text-gray-700 shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-700 dark:text-gray-200">
<a href="#section3">Section 3</a>
</li>
<li class="p-4 rounded-lg bg-white text-gray-700 shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-700 dark:text-gray-200">
<a href="#section4">Section 4</a>
</li>
<li class="p-4 rounded-lg bg-white text-gray-700 shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-700 dark:text-gray-200">
<a href="#section5">Section 5</a>
</li>
</ul>
<div class="mt-6 w-full">
<img src="https://picsum.photos/300/200" alt="Sample Image" class="w-full h-auto rounded-lg shadow-lg">
</div>
<div class="mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full shadow-lg">
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">User Name</p>
</div>
</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.
Composant de la table des matières
Un composant de table des matières minimaliste et réactif doté d’un style CSS Tailwind, prenant en charge le mode sombre et présentant des éléments de conception épuré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.