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
RetroEarthDashboardTOC
Composant de table des matières réactif avec un design rétro/vintage, une palette de couleurs de tons de terre et la prise en charge du mode sombre pour l’utilisation du tableau de bord.
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 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.