Sommario Componente
Componente Sommario reattivo con design Skeuomorphism, combinazione di colori pastello e supporto per la modalità scura, adatto per i portfolio.
Codice HTML
<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>Componenti correlati
Glassmorphism_RealEstate_TableOfContents
Un componente dell'indice in stile glassmorphism per gli annunci immobiliari, con elementi traslucidi, effetti di sfocatura e una combinazione di colori viola/viola. È reattivo e supporta la modalità oscura.
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.
Bauhaus_Retro_Photography_TOC
Un componente di indice complesso e reattivo per siti Web di fotografia, ispirato ai principi di progettazione Bauhaus e a una tavolozza di colori retrò/vintage. Presenta forme geometriche, colori tenui e supporto completo della modalità scura, ideale per gallerie fotografiche e portfolio.