Sommario Componente
Un componente minimalista per l'indice progettato con Tailwind CSS, con effetti reattivi e supporto per il tema scuro.
Codice HTML
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Table of Contents</h2>
<ul class="list-disc pl-5 space-y-2">
<li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
<a href="#section1" class="text-gray-700 dark:text-gray-300">Section 1</a>
</li>
<li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
<a href="#section2" class="text-gray-700 dark:text-gray-300">Section 2</a>
</li>
<li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
<a href="#section3" class="text-gray-700 dark:text-gray-300">Section 3</a>
</li>
<li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
<a href="#section4" class="text-gray-700 dark:text-gray-300">Section 4</a>
</li>
<li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
<a href="#section5" class="text-gray-700 dark:text-gray-300">Section 5</a>
</li>
</ul>
</div>
<div class="mt-8 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h3 id="section1" class="text-xl font-semibold text-gray-800 dark:text-white">Section 1</h3>
<p class="text-gray-700 dark:text-gray-300">Content for section 1. <img src="https://picsum.photos/200/100" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>
<div class="mt-4 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h3 id="section2" class="text-xl font-semibold text-gray-800 dark:text-white">Section 2</h3>
<p class="text-gray-700 dark:text-gray-300">Content for section 2. <img src="https://picsum.photos/200/100?random=1" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>
<div class="mt-4 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h3 id="section3" class="text-xl font-semibold text-gray-800 dark:text-white">Section 3</h3>
<p class="text-gray-700 dark:text-gray-300">Content for section 3. <img src="https://picsum.photos/200/100?random=2" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>
<div class="mt-4 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h3 id="section4" class="text-xl font-semibold text-gray-800 dark:text-white">Section 4</h3>
<p class="text-gray-700 dark:text-gray-300">Content for section 4. <img src="https://picsum.photos/200/100?random=3" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>
<div class="mt-4 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h3 id="section5" class="text-xl font-semibold text-gray-800 dark:text-white">Section 5</h3>
<p class="text-gray-700 dark:text-gray-300">Content for section 5. <img src="https://picsum.photos/200/100?random=4" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>Componenti correlati
Sommario Componente
Un componente dell'indice semplice, vivace e reattivo con un design 3D, adatto per siti Web di viaggi/turismo, incluso il supporto della modalità oscura.
Sommario Componente
Un componente dell'indice reattivo con un design scheumorfico, una combinazione di colori triadici e il supporto del tema scuro, adatto per le interfacce dei social media. Niente JavaScript, solo HTML e CSS Tailwind.
Glassmorphism_RealEstate_TableOfContents
Un componente dell'indice in stile glassmorphism per gli annunci immobiliari, con elementi traslucidi, effetti di sfocatura e una combinazione di colori viola/viola. È reattivo e supporta la modalità oscura.