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.
Código HTML
<nav class="p-4 bg-gray-100 dark:bg-gray-800">
<ul class="space-y-2">
<li><a href="#section1" class="block py-2 px-4 text-gray-700 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out transform hover:scale-105">Section 1</a></li>
<li><a href="#section2" class="block py-2 px-4 text-gray-700 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out transform hover:scale-105">Section 2</a></li>
<li><a href="#section3" class="block py-2 px-4 text-gray-700 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out transform hover:scale-105">Section 3</a></li>
</ul>
</nav>Componentes relacionados
Componente de tabla de contenido
Un componente de tabla de contenido receptivo con diseño de materiales con colores vibrantes, adecuado para blogs y consumo de contenido, que incluye soporte para modo oscuro y múltiples elementos interactivos.
Componente Tabla de contenido 3D
Un componente de tabla de contenido adaptable diseñado para el comercio electrónico, con elementos de diseño 3D y una combinación de colores complementaria. Incluye elementos interactivos y es compatible con el modo oscuro.
Componente de tabla de contenido
Un componente de tabla de contenido minimalista y receptivo diseñado con Tailwind CSS, compatible con el modo oscuro y con elementos de diseño limpios.