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 Componente 34
Un componente dell'indice reattivo con stile Material Design, con supporto per temi scuri e utilizzo di Tailwind CSS.
Sommario Componente - Toni della Terra 3D
Un complesso componente di sommario ispirato al 3D per siti Web aziendali e aziendali, caratterizzato da toni della terra e piena reattività con supporto della modalità oscura. Progettato per fornire profondità e coinvolgimento.
Sommario Componente
Un componente dell'indice minimalista e reattivo con stile CSS Tailwind, che supporta la modalità oscura e presenta elementi di design puliti.