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

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.

Ouvrir

Table des matières Composante 34

Un composant de table des matières réactif conçu avec Material Design, avec prise en charge du thème sombre et utilisant Tailwind CSS.

Ouvrir

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.

Ouvrir