Componente de tabla de contenido
Un componente minimalista de tabla de contenido diseñado con Tailwind CSS, con efectos responsivos y compatibilidad con temas oscuros.
Código 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>Componentes relacionados
Tabla de contenidos
Tabla de contenido Componente con diseño de microinteracciones, combinación de colores análoga, complejidad simple y propósito de redes sociales. Responsivo con soporte para temas oscuros. Sin código JavaScript.
Tabla de contenido Componente 34
Un componente de tabla de contenido responsivo con estilo Material Design, con soporte para temas oscuros y uso de Tailwind CSS.
Componente de tabla de contenido
Un componente de tabla de contenido interactivo diseñado en el estilo de la interfaz de usuario del modo oscuro, con secciones, títulos, descripciones e imágenes/avatares aleatorios.