Composants Table des matières Table des matières Composant - Tons de terre 3D
Table des matières Composant - Tons de terre 3D

Un composant complexe de table des matières inspiré de la 3D pour les sites Web d’entreprise et d’entreprise, avec des tons de terre et une réactivité totale avec prise en charge du mode sombre. Conçu pour offrir de la profondeur et de l’engagement.
Aperçu

HTML Code

<div class="font-sans bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 p-4 md:p-8 lg:p-12 min-h-screen">

  <div class="max-w-7xl mx-auto py-8 lg:py-16">
    <h2 class="text-4xl lg:text-5xl font-extrabold text-center mb-12 lg:mb-16 tracking-tight text-stone-800 dark:text-stone-200 relative">
      <span class="block">Table of Contents</span>
      <span class="absolute top-full left-1/2 -translate-x-1/2 w-24 h-1 bg-amber-500 rounded-full mt-2"></span>
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- TOC Item 1 -->
      <a href="#introduction" class="group block perspective-1000">
        <div class="relative bg-stone-200 dark:bg-stone-800 rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 transform-style-preserve-3d group-hover:rotateY-5 group-hover:rotateX-5 group-hover:scale-105 group-hover:shadow-2xl dark:group-hover:shadow-xl-dark backface-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-amber-500 to-amber-600 opacity-20 dark:opacity-10 rounded-3xl after:absolute after:inset-0 after:rounded-3xl after:shadow-inner-xl after:dark:shadow-inner-xl-dark"></div>
          <div class="p-6 md:p-8 lg:p-10 relative z-10 flex flex-col items-center text-center">
            <div class="w-16 h-16 bg-amber-400 dark:bg-amber-600 rounded-full flex items-center justify-center mb-4 transform translateZ-20 shadow-md">
              <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253m9 0c1.168-.776 2.754-1.253 4.5-1.253s3.332.477 4.5 1.253m-9 0V14m0-7a3 3 0 013 3v2m0 0l-1.477 1.477L9 16m4-4s-1.143-2-3-2m9 0a3 3 0 013 3v2m0 0l-1.477 1.477L21 16m-4-4c-1.143 2-3 2-3 2s-1.143 0-3-2"></path></svg>
            </div>
            <h3 class="text-2xl font-bold mb-2 text-stone-800 dark:text-stone-100 transform translateZ-10">1. Introduction</h3>
            <p class="text-stone-700 dark:text-stone-300 text-sm transform translateZ-5">Overview of our mission and values.</p>
            <span class="mt-4 inline-block px-4 py-2 bg-amber-500 dark:bg-amber-700 text-white text-xs font-semibold rounded-full transform translateZ-15 shadow-lg group-hover:bg-amber-600 dark:group-hover:bg-amber-800 transition-colors duration-200">Read More</span>
          </div>
        </div>
      </a>

      <!-- TOC Item 2 -->
      <a href="#company-history" class="group block perspective-1000">
        <div class="relative bg-stone-200 dark:bg-stone-800 rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 transform-style-preserve-3d group-hover:rotateY-5 group-hover:rotateX-5 group-hover:scale-105 group-hover:shadow-2xl dark:group-hover:shadow-xl-dark backface-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-green-600 to-green-700 opacity-20 dark:opacity-10 rounded-3xl after:absolute after:inset-0 after:rounded-3xl after:shadow-inner-xl after:dark:shadow-inner-xl-dark"></div>
          <div class="p-6 md:p-8 lg:p-10 relative z-10 flex flex-col items-center text-center">
            <div class="w-16 h-16 bg-green-500 dark:bg-green-700 rounded-full flex items-center justify-center mb-4 transform translateZ-20 shadow-md">
              <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
            </div>
            <h3 class="text-2xl font-bold mb-2 text-stone-800 dark:text-stone-100 transform translateZ-10">2. Company History</h3>
            <p class="text-stone-700 dark:text-stone-300 text-sm transform translateZ-5">Key milestones and growth journey.</p>
            <span class="mt-4 inline-block px-4 py-2 bg-green-600 dark:bg-green-800 text-white text-xs font-semibold rounded-full transform translateZ-15 shadow-lg group-hover:bg-green-700 dark:group-hover:bg-green-900 transition-colors duration-200">Explore Past</span>
          </div>
        </div>
      </a>

      <!-- TOC Item 3 -->
      <a href="#our-services" class="group block perspective-1000">
        <div class="relative bg-stone-200 dark:bg-stone-800 rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 transform-style-preserve-3d group-hover:rotateY-5 group-hover:rotateX-5 group-hover:scale-105 group-hover:shadow-2xl dark:group-hover:shadow-xl-dark backface-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-blue-600 to-blue-700 opacity-20 dark:opacity-10 rounded-3xl after:absolute after:inset-0 after:rounded-3xl after:shadow-inner-xl after:dark:shadow-inner-xl-dark"></div>
          <div class="p-6 md:p-8 lg:p-10 relative z-10 flex flex-col items-center text-center">
            <div class="w-16 h-16 bg-blue-500 dark:bg-blue-700 rounded-full flex items-center justify-center mb-4 transform translateZ-20 shadow-md">
              <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255v-2.189a1.125 1.125 0 011.125-1.125h.875a.875.875 0 00.875-.875V7a.875.875 0 00-.875-.875H22a1.125 1.125 0 01-1.125-1.125V4.255a1.125 1.125 0 00-1.125-1.125H16.89M12 17.5a4.5 4.5 0 110-9 4.5 4.5 0 010 9zM12 17.5V21M12 6.5V3"></path></svg>
            </div>
            <h3 class="text-2xl font-bold mb-2 text-stone-800 dark:text-stone-100 transform translateZ-10">3. Our Services</h3>
            <p class="text-stone-700 dark:text-stone-300 text-sm transform translateZ-5">Comprehensive solutions for your business.</p>
            <span class="mt-4 inline-block px-4 py-2 bg-blue-600 dark:bg-blue-800 text-white text-xs font-semibold rounded-full transform translateZ-15 shadow-lg group-hover:bg-blue-700 dark:group-hover:bg-blue-900 transition-colors duration-200">View Offerings</span>
          </div>
        </div>
      </a>

      <!-- TOC Item 4 -->
      <a href="#client-testimonials" class="group block perspective-1000">
        <div class="relative bg-stone-200 dark:bg-stone-800 rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 transform-style-preserve-3d group-hover:rotateY-5 group-hover:rotateX-5 group-hover:scale-105 group-hover:shadow-2xl dark:group-hover:shadow-xl-dark backface-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-red-500 to-red-600 opacity-20 dark:opacity-10 rounded-3xl after:absolute after:inset-0 after:rounded-3xl after:shadow-inner-xl after:dark:shadow-inner-xl-dark"></div>
          <div class="p-6 md:p-8 lg:p-10 relative z-10 flex flex-col items-center text-center">
            <div class="w-16 h-16 bg-red-400 dark:bg-red-600 rounded-full flex items-center justify-center mb-4 transform translateZ-20 shadow-md">
              <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h10M7 16h10M4 6h16a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V8a2 2 0 012-2z"></path></svg>
            </div>
            <h3 class="text-2xl font-bold mb-2 text-stone-800 dark:text-stone-100 transform translateZ-10">4. Client Testimonials</h3>
            <p class="text-stone-700 dark:text-stone-300 text-sm transform translateZ-5">Hear from our satisfied clients.</p>
            <span class="mt-4 inline-block px-4 py-2 bg-red-500 dark:bg-red-700 text-white text-xs font-semibold rounded-full transform translateZ-15 shadow-lg group-hover:bg-red-600 dark:group-hover:bg-red-800 transition-colors duration-200">Read Reviews</span>
          </div>
        </div>
      </a>

      <!-- TOC Item 5 -->
      <a href="#our-team" class="group block perspective-1000">
        <div class="relative bg-stone-200 dark:bg-stone-800 rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 transform-style-preserve-3d group-hover:rotateY-5 group-hover:rotateX-5 group-hover:scale-105 group-hover:shadow-2xl dark:group-hover:shadow-xl-dark backface-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-purple-500 to-purple-600 opacity-20 dark:opacity-10 rounded-3xl after:absolute after:inset-0 after:rounded-3xl after:shadow-inner-xl after:dark:shadow-inner-xl-dark"></div>
          <div class="p-6 md:p-8 lg:p-10 relative z-10 flex flex-col items-center text-center">
            <div class="w-16 h-16 bg-purple-400 dark:bg-purple-600 rounded-full flex items-center justify-center mb-4 transform translateZ-20 shadow-md">
              <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h-8a4 4 0 01-4-4v-1.586a1 1 0 01-.293-.707L4 12V6a2 2 0 012-2h12a2 2 0 012 2v6a2 2 0 01-2 2h-1m-7 8a4 4 0 100-8 4 4 0 000 8z"></path></svg>
            </div>
            <h3 class="text-2xl font-bold mb-2 text-stone-800 dark:text-stone-100 transform translateZ-10">5. Our Team</h3>
            <p class="text-stone-700 dark:text-stone-300 text-sm transform translateZ-5">Meet the experts behind our success.</p>
            <span class="mt-4 inline-block px-4 py-2 bg-purple-500 dark:bg-purple-700 text-white text-xs font-semibold rounded-full transform translateZ-15 shadow-lg group-hover:bg-purple-600 dark:group-hover:bg-purple-800 transition-colors duration-200">Meet Us</span>
          </div>
        </div>
      </a>

      <!-- TOC Item 6 -->
      <a href="#contact-us" class="group block perspective-1000">
        <div class="relative bg-stone-200 dark:bg-stone-800 rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 transform-style-preserve-3d group-hover:rotateY-5 group-hover:rotateX-5 group-hover:scale-105 group-hover:shadow-2xl dark:group-hover:shadow-xl-dark backface-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-teal-500 to-teal-600 opacity-20 dark:opacity-10 rounded-3xl after:absolute after:inset-0 after:rounded-3xl after:shadow-inner-xl after:dark:shadow-inner-xl-dark"></div>
          <div class="p-6 md:p-8 lg:p-10 relative z-10 flex flex-col items-center text-center">
            <div class="w-16 h-16 bg-teal-400 dark:bg-teal-600 rounded-full flex items-center justify-center mb-4 transform translateZ-20 shadow-md">
              <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
            </div>
            <h3 class="text-2xl font-bold mb-2 text-stone-800 dark:text-stone-100 transform translateZ-10">6. Contact Us</h3>
            <p class="text-stone-700 dark:text-stone-300 text-sm transform translateZ-5">Get in touch for inquiries.</p>
            <span class="mt-4 inline-block px-4 py-2 bg-teal-500 dark:bg-teal-700 text-white text-xs font-semibold rounded-full transform translateZ-15 shadow-lg group-hover:bg-teal-600 dark:group-hover:bg-teal-800 transition-colors duration-200">Contact Now</span>
          </div>
        </div>
      </a>

    </div>
  </div>

  <style>
  /* Adding custom CSS for 3D transforms */
  .perspective-1000 {
    perspective: 1000px;
  }

  .transform-style-preserve-3d {
    transform-style: preserve-3d;
  }

  .rotateY-5 {
    transform: rotateY(5deg);
  }

  .rotateX-5 {
    transform: rotateX(5deg);
  }
  .group-hover\:rotateY-5:hover {
    transform: rotateY(5deg) scale(1.05);
  }
  .group-hover\:rotateX-5:hover {
    transform: rotateX(5deg) scale(1.05);
  }
  .group-hover\:scale-105:hover {
    transform: scale(1.05);
  }

  /* Combining for better 3D effect on hover */
  .group-hover\:rotateY-5.group-hover\:rotateX-5.group-hover\:scale-105:hover {
    transform: rotateY(5deg) rotateX(5deg) scale(1.05);
  }
  
  /* Z-axis transforms */
  .translateZ-5 {
    transform: translateZ(5px);
  }
  .translateZ-10 {
    transform: translateZ(10px);
  }
  .translateZ-15 {
    transform: translateZ(15px);
  }
  .translateZ-20 {
    transform: translateZ(20px);
  }

  /* Inner shadow for '3D' depth */
  .shadow-inner-xl {
    box-shadow: inset 0 6px 12px rgba(0,0,0,0.1);
  }
  .dark\:shadow-inner-xl-dark {
    box-shadow: inset 0 6px 12px rgba(255,255,255,0.05);
  }
  .shadow-xl-dark {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
  }
  
  /* Backface visibility to prevent flickering on 3D transforms */
  .backface-hidden {
    backface-visibility: hidden;
  }
  </style>

</div>
Composants associés

Composant de la table des matières

Un composant de table des matières réactif stylisé avec Neumorphism à l’aide de Tailwind CSS, avec prise en charge du thème sombre et affichant des images et des avatars de remplacement.
Ouvrir
Composant de la table des matières

Un composant de table des matières réactif et compatible avec le mode sombre avec une palette de couleurs rétro/vintage, adapté aux plateformes de rencontres/sociales. Il présente une palette de couleurs sourdes et une navigation à défilement fluide.
Ouvrir
Composant de la table des matières

Un composant de table des matières réactif conçu selon les principes de Material Design à l’aide de Tailwind CSS, prenant en charge le mode sombre et proposant des images et des avatars de repère.
Ouvrir