Sommario Componente
Un componente reattivo dell'indice progettato in stile interfaccia utente in modalità scura, con sezioni, titoli, descrizioni e immagini/avatar casuali.
Codice HTML
<div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-4">Table of Contents</h2>
<ul class="space-y-3">
<li class="hover:bg-gray-800 rounded p-2 transition duration-300">
<h3 class="font-semibold">Section 1</h3>
<p class="text-gray-400">Description of Section 1</p>
<img src="https://picsum.photos/200/100?random=1" alt="Random Image" class="mt-2 rounded" />
</li>
<li class="hover:bg-gray-800 rounded p-2 transition duration-300">
<h3 class="font-semibold">Section 2</h3>
<p class="text-gray-400">Description of Section 2</p>
<img src="https://picsum.photos/200/100?random=2" alt="Random Image" class="mt-2 rounded" />
</li>
<li class="hover:bg-gray-800 rounded p-2 transition duration-300">
<h3 class="font-semibold">Section 3</h3>
<p class="text-gray-400">Description of Section 3</p>
<img src="https://picsum.photos/200/100?random=3" alt="Random Image" class="mt-2 rounded" />
</li>
</ul>
<div class="mt-5 border-t border-gray-700 pt-4">
<h4 class="font-semibold">Author</h4>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3" />
<span class="text-gray-400">John Doe</span>
</div>
</div>
</div>Componenti correlati
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.
Sommario
Sommario Componente con design di microinterazioni, combinazione di colori analoga, complessità semplice e scopo dei social media. Reattivo con supporto per il tema scuro. Nessun codice JavaScript.
Sommario Componente
Un componente reattivo del sommario progettato per la modalità scura, con sezioni con titoli e segnaposto per immagini e avatar.