Composants Table des matières Composant de la table des matières

Composant de la table des matières

Composant de table des matières réactif avec prise en charge du mode sombre à l’aide de Tailwind CSS. Le composant est conçu à des fins de portefeuille, avec un schéma de couleurs monochromatiques et un niveau de complexité modéré sans JavaScript.

Aperçu

HTML Code

<div class="bg-gray-900 text-gray-300 p-8 min-h-screen">
  <div class="max-w-4xl mx-auto">
    <h1 class="text-3xl font-bold text-white mb-8">Table of Contents</h1>
    <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
      <ul class="space-y-4">
        <li>
          <a href="#section-1" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
            <span class="font-semibold text-gray-300">Section 1:</span> Introduction
          </a>
        </li>
        <li>
          <a href="#section-2" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
            <span class="font-semibold text-gray-300">Section 2:</span> About Me
          </a>
          <ul class="ml-6 mt-2 space-y-2">
            <li>
              <a href="#section-2-1" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
                2.1 My Background
              </a>
            </li>
            <li>
              <a href="#section-2-2" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
                2.2 Skills
              </a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#section-3" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
            <span class="font-semibold text-gray-300">Section 3:</span> My Work
          </a>
          <ul class="ml-6 mt-2 space-y-2">
            <li>
              <a href="#section-3-1" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
                3.1 Project Alpha
              </a>
            </li>
            <li>
              <a href="#section-3-2" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
                3.2 Project Beta
              </a>
            </li>
            <li>
              <a href="#section-3-3" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
                3.3 Project Gamma
              </a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#section-4" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
            <span class="font-semibold text-gray-300">Section 4:</span> Contact
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

Composants associés

Table des matières

Un composant de table des matières réactif doté de la technologie Glassmorphism, avec des éléments translucides semblables à du verre dépoli avec des effets de flou et la prise en charge des thèmes sombres. Comprend des sections et des images fictives pour une représentation visuelle.

Ouvrir