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.
Codice HTML
<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>Componenti correlati
Sommario Componente
Un componente dell'indice minimalista e reattivo con stile CSS Tailwind, che supporta la modalità oscura e presenta elementi di design puliti.
RetroEarthDashboardTOC
Componente Sommario reattivo con design retrò/vintage, combinazione di colori dei toni della terra e supporto della modalità oscura per l'uso della dashboard.
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.