Composant de la table des matières
Un composant minimaliste de la table des matières conçu avec Tailwind CSS, avec des effets réactifs et la prise en charge des thèmes sombres.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Table of Contents</h2>
<ul class="list-disc pl-5 space-y-2">
<li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
<a href="#section1" class="text-gray-700 dark:text-gray-300">Section 1</a>
</li>
<li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
<a href="#section2" class="text-gray-700 dark:text-gray-300">Section 2</a>
</li>
<li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
<a href="#section3" class="text-gray-700 dark:text-gray-300">Section 3</a>
</li>
<li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
<a href="#section4" class="text-gray-700 dark:text-gray-300">Section 4</a>
</li>
<li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
<a href="#section5" class="text-gray-700 dark:text-gray-300">Section 5</a>
</li>
</ul>
</div>
<div class="mt-8 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h3 id="section1" class="text-xl font-semibold text-gray-800 dark:text-white">Section 1</h3>
<p class="text-gray-700 dark:text-gray-300">Content for section 1. <img src="https://picsum.photos/200/100" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>
<div class="mt-4 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h3 id="section2" class="text-xl font-semibold text-gray-800 dark:text-white">Section 2</h3>
<p class="text-gray-700 dark:text-gray-300">Content for section 2. <img src="https://picsum.photos/200/100?random=1" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>
<div class="mt-4 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h3 id="section3" class="text-xl font-semibold text-gray-800 dark:text-white">Section 3</h3>
<p class="text-gray-700 dark:text-gray-300">Content for section 3. <img src="https://picsum.photos/200/100?random=2" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>
<div class="mt-4 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h3 id="section4" class="text-xl font-semibold text-gray-800 dark:text-white">Section 4</h3>
<p class="text-gray-700 dark:text-gray-300">Content for section 4. <img src="https://picsum.photos/200/100?random=3" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>
<div class="mt-4 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h3 id="section5" class="text-xl font-semibold text-gray-800 dark:text-white">Section 5</h3>
<p class="text-gray-700 dark:text-gray-300">Content for section 5. <img src="https://picsum.photos/200/100?random=4" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>Composants associés
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.
Composant de la table des matières
Un composant de table des matières réactif conçu dans le style Glassmorphism, avec des éléments translucides givrés ressemblant à du verre avec des effets de flou, prenant en charge les thèmes clairs et sombres avec Tailwind CSS.
Composant de la table des matières - Réservation/Réservation
Un composant de table des matières simple et réactif pour les systèmes de réservation, avec des couleurs en niveaux de gris et des transitions de dégradé subtiles. Inclut la prise en charge du mode sombre.