Componente de tabla de contenido
Componente de tabla de contenido responsivo con diseño de skeuomorfismo, combinación de colores pastel y compatibilidad con modo oscuro, adecuado para carteras.
Código HTML
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg dark:shadow-xl">
<h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Table of Contents</h2>
<ul class="space-y-2">
<li>
<a href="#section1" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
<span class="font-semibold">Section 1: Introduction</span>
</a>
</li>
<li>
<a href="#section2" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
<span class="font-semibold">Section 2: Projects</span>
</a>
</li>
<li>
<a href="#section3" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
<span class="font-semibold">Section 3: Skills</span>
</a>
</li>
<li>
<a href="#section4" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
<span class="font-semibold">Section 4: Contact</span>
</a>
</li>
</ul>
</div>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 de tabla de contenido
Un componente de tabla de contenido receptivo con un diseño de cristal y una combinación de colores pastel, adecuado para paneles con visualización de datos y paneles de control.
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.