Table des matières

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.

Ouvrir l’aperçu

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg dark:shadow-xl">
  <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Table of Contents</h2>
  <ul class="space-y-2">
    <li>
      <a href="#section1" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
        <span class="font-semibold">Section 1: Introduction</span>
      </a>
    </li>
    <li>
      <a href="#section2" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
        <span class="font-semibold">Section 2: Projects</span>
      </a>
    </li>
    <li>
      <a href="#section3" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
        <span class="font-semibold">Section 3: Skills</span>
      </a>
    </li>
    <li>
      <a href="#section4" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
        <span class="font-semibold">Section 4: Contact</span>
      </a>
    </li>
  </ul>
</div>

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.

Ouvrir l’aperçu

                <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>

Composant de la table des matières

Un composant de table des matières réactif stylisé en Material Design avec des couleurs vives, adapté aux blogs et à la consommation de contenu, y compris la prise en charge du mode sombre et plusieurs éléments interactifs.

Ouvrir l’aperçu

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Table of Contents</h2>
    <ul class="space-y-3">
        <li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded p-2 transition duration-200">
            <a href="#section1" class="flex items-center text-gray-600 dark:text-gray-200">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3">
                <span class="font-medium">Section 1: Introduction</span>
            </a>
        </li>
        <li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded p-2 transition duration-200">
            <a href="#section2" class="flex items-center text-gray-600 dark:text-gray-200">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3">
                <span class="font-medium">Section 2: Features</span>
            </a>
        </li>
        <li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded p-2 transition duration-200">
            <a href="#section3" class="flex items-center text-gray-600 dark:text-gray-200">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3">
                <span class="font-medium">Section 3: Implementation</span>
            </a>
        </li>
        <li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded p-2 transition duration-200">
            <a href="#section4" class="flex items-center text-gray-600 dark:text-gray-200">
                <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3">
                <span class="font-medium">Section 4: Conclusion</span>
            </a>
        </li>
    </ul>
    <div class="mt-6">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Images</h3>
        <div class="grid grid-cols-2 gap-4 mt-2">
            <img src="https://picsum.photos/200/150?random=1" alt="Random Image 1" class="rounded-lg shadow">
            <img src="https://picsum.photos/200/150?random=2" alt="Random Image 2" class="rounded-lg shadow">
            <img src="https://picsum.photos/200/150?random=3" alt="Random Image 3" class="rounded-lg shadow">
            <img src="https://picsum.photos/200/150?random=4" alt="Random Image 4" class="rounded-lg shadow">
        </div>
    </div>
</div>

Composant de la table des matières

Un composant de table des matières réactif conçu dans le style Material Design avec prise en charge des tons de terre et des thèmes sombres pour les sites Web d’entreprise.

Ouvrir l’aperçu

                <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Table of Contents</h2>
    <ul class="mt-4 space-y-2">
        <li class="flex items-center">
            <img src="https://i.pravatar.cc/40" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <a href="#section1" class="text-gray-700 dark:text-gray-300 hover:underline">Section 1</a>
        </li>
        <li class="flex items-center">
            <img src="https://i.pravatar.cc/41" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <a href="#section2" class="text-gray-700 dark:text-gray-300 hover:underline">Section 2</a>
        </li>
        <li class="flex items-center">
            <img src="https://i.pravatar.cc/42" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <a href="#section3" class="text-gray-700 dark:text-gray-300 hover:underline">Section 3</a>
        </li>
        <li class="flex items-center">
            <img src="https://i.pravatar.cc/43" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <a href="#section4" class="text-gray-700 dark:text-gray-300 hover:underline">Section 4</a>
        </li>
    </ul>
</div>
<div class="bg-gray-200 dark:bg-gray-900 p-6 mt-6 rounded-lg">
    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Additional Resources</h3>
    <ul class="mt-2 space-y-1">
        <li>
            <a href="#resource1" class="text-gray-600 dark:text-gray-400 hover:underline">Resource 1</a>
        </li>
        <li>
            <a href="#resource2" class="text-gray-600 dark:text-gray-400 hover:underline">Resource 2</a>
        </li>
        <li>
            <a href="#resource3" class="text-gray-600 dark:text-gray-400 hover:underline">Resource 3</a>
        </li>
    </ul>
</div>

Composant de table des matières 3D

Un composant de table des matières réactif conçu pour le commerce électronique, avec des éléments de conception 3D et une palette de couleurs complémentaire. Il comprend des éléments interactifs et prend en charge le mode sombre.

Ouvrir l’aperçu

                <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Table of Contents</h1>
    <ul class="space-y-4">
        <li class="relative transition-transform transform hover:scale-105">
            <div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
                <img src="https://picsum.photos/50/50" alt="Item 1" class="w-12 h-12 rounded-full mr-3">
                <span class="font-semibold text-gray-800 dark:text-white">Item 1: Introduction</span>
            </div>
        </li>
        <li class="relative transition-transform transform hover:scale-105">
            <div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
                <img src="https://picsum.photos/50/50?random=1" alt="Item 2" class="w-12 h-12 rounded-full mr-3">
                <span class="font-semibold text-gray-800 dark:text-white">Item 2: Features</span>
            </div>
        </li>
        <li class="relative transition-transform transform hover:scale-105">
            <div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
                <img src="https://picsum.photos/50/50?random=2" alt="Item 3" class="w-12 h-12 rounded-full mr-3">
                <span class="font-semibold text-gray-800 dark:text-white">Item 3: Pricing</span>
            </div>
        </li>
        <li class="relative transition-transform transform hover:scale-105">
            <div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
                <img src="https://picsum.photos/50/50?random=3" alt="Item 4" class="w-12 h-12 rounded-full mr-3">
                <span class="font-semibold text-gray-800 dark:text-white">Item 4: Support</span>
            </div>
        </li>
        <li class="relative transition-transform transform hover:scale-105">
            <div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
                <img src="https://picsum.photos/50/50?random=4" alt="Item 5" class="w-12 h-12 rounded-full mr-3">
                <span class="font-semibold text-gray-800 dark:text-white">Item 5: FAQ</span>
            </div>
        </li>
    </ul>
</div>

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.

Ouvrir l’aperçu

                <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-md mx-auto">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Table of Contents</h2>
    <ul class="space-y-2">
        <li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition duration-200">
            <a href="#section1" class="block text-gray-800 dark:text-gray-200 p-3 rounded-md">1. Introduction</a>
        </li>
        <li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition duration-200">
            <a href="#section2" class="block text-gray-800 dark:text-gray-200 p-3 rounded-md">2. Overview of the Topic</a>
        </li>
        <li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition duration-200">
            <a href="#section3" class="block text-gray-800 dark:text-gray-200 p-3 rounded-md">3. In-Depth Analysis</a>
        </li>
        <li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition duration-200">
            <a href="#section4" class="block text-gray-800 dark:text-gray-200 p-3 rounded-md">4. Conclusion</a>
        </li>
    </ul>
</div>

Composant de la table des matières

Un composant de table des matières réactif conçu avec des éléments skeuomorphes et des tons de terre pour une vitrine de portfolio, avec prise en charge du mode sombre.

Ouvrir l’aperçu

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-semibold text-green-800 dark:text-green-200 mb-4">Table of Contents</h2>
    <ul class="space-y-4">
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section1" class="text-gray-800 dark:text-gray-200 font-semibold">Section 1</a>
        </li>
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section2" class="text-gray-800 dark:text-gray-200 font-semibold">Section 2</a>
        </li>
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section3" class="text-gray-800 dark:text-gray-200 font-semibold">Section 3</a>
        </li>
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section4" class="text-gray-800 dark:text-gray-200 font-semibold">Section 4</a>
        </li>
    </ul>
</div>

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 l’aperçu

                <div class="bg-stone-100 dark:bg-stone-900 text-stone-800 dark:text-stone-200 p-6 rounded-lg shadow-lg font-mono">
  <h2 class="text-xl font-bold mb-4">Table of Contents</h2>
  <ul class="space-y-2">
    <li><a href="#section-1" class="hover:underline">1. Introduction</a></li>
    <li><a href="#section-2" class="hover:underline">2. Data Overview</a></li>
    <li>
      <a href="#section-3" class="hover:underline">3. Key Metrics</a>
      <ul class="ml-4 mt-1 space-y-1">
        <li><a href="#section-3-1" class="hover:underline">3.1. Sales Performance</a></li>
        <li><a href="#section-3-2" class="hover:underline">3.2. User Engagement</a></li>
      </ul>
    </li>
    <li><a href="#section-4" class="hover:underline">4. Conclusion</a></li>
  </ul>
</div>