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.

Aperçu

HTML Code

<nav class="p-4 bg-gray-100 dark:bg-gray-800">
  <ul class="space-y-2">
    <li><a href="#section1" class="block py-2 px-4 text-gray-700 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out transform hover:scale-105">Section 1</a></li>
    <li><a href="#section2" class="block py-2 px-4 text-gray-700 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out transform hover:scale-105">Section 2</a></li>
    <li><a href="#section3" class="block py-2 px-4 text-gray-700 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out transform hover:scale-105">Section 3</a></li>
  </ul>
</nav>

Composants associés

Table des matières rétro

Composant de table des matières réactif avec design rétro/vintage, schéma de couleurs analogue et prise en charge du mode sombre. Convient aux sites Web d’entreprise. Utilise Tailwind CSS sans JavaScript.

Ouvrir

Composant de la table des matières

Composant de table des matières réactif conçu dans le style de l’interface utilisateur du mode sombre, avec des sections, des titres, des descriptions et des images/avatars aléatoires.

Ouvrir

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.

Ouvrir