Componente de tabla de contenido
Un componente responsivo de la tabla de contenido diseñado con elementos skeuomórficos y tonos tierra para una presentación de cartera, con soporte para el modo oscuro.
Código HTML
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-2xl font-semibold text-green-800 dark:text-green-200 mb-4">Table of Contents</h2>
<ul class="space-y-4">
<li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
<a href="#section1" class="text-gray-800 dark:text-gray-200 font-semibold">Section 1</a>
</li>
<li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
<a href="#section2" class="text-gray-800 dark:text-gray-200 font-semibold">Section 2</a>
</li>
<li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
<a href="#section3" class="text-gray-800 dark:text-gray-200 font-semibold">Section 3</a>
</li>
<li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
<a href="#section4" class="text-gray-800 dark:text-gray-200 font-semibold">Section 4</a>
</li>
</ul>
</div>Componentes relacionados
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.
Componente de tabla de contenido
Un componente de tabla de contenido receptivo para interfaces de redes sociales, diseñado con una interfaz de usuario de modo oscuro que usa tonos tierra y un diseño simple. Es compatible con el tema oscuro que usa Tailwind CSS y es solo HTML sin JavaScript.
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.