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
Componente Sommario reattivo con supporto per la modalità oscura utilizzando Tailwind CSS. Il componente è progettato per uno scopo di portfolio, caratterizzato da una combinazione di colori monocromatica e un livello di complessità moderato senza JavaScript.
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.
Sommario Componente
Componente Sommario reattivo con design Skeuomorphism, combinazione di colori pastello e supporto per la modalità scura, adatto per i portfolio.