Sommario retrò
Componente reattivo con design retrò/vintage, combinazione di colori analoga e supporto per la modalità oscura. Adatto per siti web aziendali/aziendali. Utilizza Tailwind CSS senza JavaScript.
Codice HTML
<div class="bg-gray-200 dark:bg-gray-800 retro-analogous-colors p-6 rounded-lg shadow-lg">
<h2 class="text-xl font-bold mb-4 dark:text-white">Table of Contents</h2>
<ul class="space-y-2">
<li><a href="#section-1" class="text-blue-800 dark:text-blue-300 hover:underline">Section 1: Introduction</a></li>
<li><a href="#section-2" class="text-blue-800 dark:text-blue-300 hover:underline">Section 2: Getting Started</a></li>
<li><a href="#section-3" class="text-blue-800 dark:text-blue-300 hover:underline">Section 3: Core Concepts</a></li>
<li><a href="#section-4" class="text-blue-800 dark:text-blue-300 hover:underline">Section 4: Advanced Topics</a></li>
<li><a href="#section-5" class="text-blue-800 dark:text-blue-300 hover:underline">Section 5: Conclusion</a></li>
</ul>
</div>
<style>
.retro-analogous-colors {
/* Define your retro analogous colors here using Tailwind's custom colors or by extending the theme */
/* Example (you would define these in your tailwind.config.js): */
/* background-color: theme('colors.retro-light'); */
/* color: theme('colors.retro-dark'); */
}
.dark .retro-analogous-colors {
/* background-color: theme('colors.retro-dark'); */
/* color: theme('colors.retro-light'); */
}
</style>Componenti correlati
Sommario Componente
Un componente reattivo del sommario progettato per la modalità scura, con sezioni con titoli e segnaposto per immagini e avatar.
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 semplice e reattivo con effetti neon/bagliore e una combinazione di colori autunnali, adatto per portfolio fotografici o gallerie, incluso il supporto della modalità scura.