Componenti Sommario Sommario Componente

Sommario Componente

Un componente dell'indice minimalista e reattivo con stile CSS Tailwind, che supporta la modalità oscura e presenta elementi di design puliti.

Anteprima

Codice HTML

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 max-w-md mx-auto">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Table of Contents</h2>
    <ul class="list-inside list-disc text-gray-600 dark:text-gray-300">
        <li class="py-1"><a href="#section1" class="hover:text-blue-600 dark:hover:text-blue-400">Section 1</a></li>
        <li class="py-1"><a href="#section2" class="hover:text-blue-600 dark:hover:text-blue-400">Section 2</a></li>
        <li class="py-1"><a href="#section3" class="hover:text-blue-600 dark:hover:text-blue-400">Section 3</a></li>
        <li class="py-1"><a href="#section4" class="hover:text-blue-600 dark:hover:text-blue-400">Section 4</a></li>
        <li class="py-1"><a href="#section5" class="hover:text-blue-600 dark:hover:text-blue-400">Section 5</a></li>
    </ul>
</div>

<div class="hidden md:flex items-center justify-center mt-8">
    <img src="https://picsum.photos/150" alt="Placeholder Image" class="rounded-full border-2 border-gray-300 dark:border-gray-700">
    <span class="ml-3 text-gray-600 dark:text-gray-300">Created by: <span class="font-semibold">John Doe</span></span>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
            color: #e2e8f0;
        }
    }
</style>

Componenti correlati

Bauhaus Medical Sommario

Un componente di sommario complesso e reattivo per applicazioni mediche/sanitarie, caratterizzato da un design funzionale ispirato al Bauhaus con colori tenui e supporto per la modalità scura. Include collegamenti di navigazione, ricerca e sezioni.

Aperto

Monospace_Developer_TOC

Un componente Sommario complesso e reattivo con un'estetica monospace/sviluppatore, una combinazione di colori gioiello, ottimizzato per la documentazione e i siti di knowledge base, con supporto per la modalità scura.

Aperto

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.

Aperto