Sommario Componente
Un componente dell'indice pulito, minimalista e reattivo ispirato alla tipografia svizzera/internazionale, progettato per la documentazione e i siti di knowledge base, caratterizzato da colori neutri caldi e supporto completo della modalità scura.
Codice HTML
<div class="font-sans antialiased text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-900 leading-normal tracking-wider">
<div class="max-w-xs md:max-w-sm lg:max-w-md mx-auto p-4 md:p-6 lg:p-8 rounded-lg shadow-lg bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
<h3 class="text-lg md:text-xl lg:text-2xl font-bold mb-4 md:mb-6 text-gray-900 dark:text-gray-100 uppercase tracking-widest border-b border-gray-300 dark:border-gray-600 pb-2">
Contents
</h3>
<nav aria-label="Table of Contents">
<ul class="space-y-2 text-sm md:text-base lg:text-lg">
<li>
<a href="#introduction" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
<span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">1. Introduction</span>
</a>
</li>
<li>
<a href="#getting-started" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
<span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">2. Getting Started</span>
</a>
<ul class="ml-4 md:ml-6 mt-2 space-y-1">
<li>
<a href="#installation" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-600 dark:text-gray-400">
2.1. Installation Guide
</a>
</li>
<li>
<a href="#basic-setup" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-600 dark:text-gray-400">
2.2. Basic Setup
</a>
</li>
</ul>
</li>
<li>
<a href="#core-concepts" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
<span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">3. Core Concepts</span>
</a>
</li>
<li>
<a href="#advanced-topics" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
<span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">4. Advanced Topics</span>
</a>
<ul class="ml-4 md:ml-6 mt-2 space-y-1">
<li>
<a href="#customization" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-600 dark:text-gray-400">
4.1. Customization
</a>
</li>
<li>
<a href="#integrations" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-600 dark:text-gray-400">
4.2. Integrations and APIs
</a>
</li>
</ul>
</li>
<li>
<a href="#troubleshooting" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
<span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">5. Troubleshooting</span>
</a>
</li>
<li>
<a href="#faq" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
<span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">6. FAQ</span>
</a>
</li>
</ul>
</nav>
</div>
</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
Un componente Sommario reattivo con uno stile in Material Design con colori vivaci, adatto per blog e consumo di contenuti, incluso il supporto della modalità oscura e più elementi interattivi.
Sommario Componente
Un semplice componente del sommario progettato in stile Material Design, che utilizza i toni della terra e supporta la modalità oscura. Adatto per il consumo di contenuti nei blog.