Componenti Sommario Sommario Componente - Toni della Terra 3D
Sommario Componente - Toni della Terra 3D

Un complesso componente di sommario ispirato al 3D per siti Web aziendali e aziendali, caratterizzato da toni della terra e piena reattività con supporto della modalità oscura. Progettato per fornire profondità e coinvolgimento.
Anteprima

Codice HTML

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

Sommario

Sommario Componente con design di microinterazioni, combinazione di colori analoga, complessità semplice e scopo dei social media. Reattivo con supporto per il tema scuro. Nessun codice JavaScript.
Aperto
Sommario Componente

Un componente Sommario reattivo per le interfacce dei social media, progettato con un'interfaccia utente in modalità oscura che utilizza i toni della terra e un layout semplice. Supporta il tema scuro utilizzando Tailwind CSS ed è solo HTML senza JavaScript.
Aperto
Sommario Componente

Un componente dell'indice reattivo progettato con lo stile Glassmorphism, con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura, che supportano temi chiari e scuri con Tailwind CSS.
Aperto