Composants Table des matières Table des matières

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

Bauhaus Medical Table des matières

Un composant de table des matières complexe et réactif pour les applications médicales/de santé, doté d’un design fonctionnel inspiré du Bauhaus avec des couleurs sourdes et une prise en charge du mode sombre. Comprend des liens de navigation, de recherche et de section.

Ouvrir

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.

Ouvrir