Componente de tabla de contenido
Componente de tabla de contenido responsivo con soporte de modo oscuro mediante Tailwind CSS. El componente está diseñado para un propósito de cartera, con un esquema de color monocromático y un nivel de complejidad moderado sin JavaScript.
Código HTML
<div class="bg-gray-900 text-gray-300 p-8 min-h-screen">
<div class="max-w-4xl mx-auto">
<h1 class="text-3xl font-bold text-white mb-8">Table of Contents</h1>
<div class="bg-gray-800 p-6 rounded-lg shadow-lg">
<ul class="space-y-4">
<li>
<a href="#section-1" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
<span class="font-semibold text-gray-300">Section 1:</span> Introduction
</a>
</li>
<li>
<a href="#section-2" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
<span class="font-semibold text-gray-300">Section 2:</span> About Me
</a>
<ul class="ml-6 mt-2 space-y-2">
<li>
<a href="#section-2-1" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
2.1 My Background
</a>
</li>
<li>
<a href="#section-2-2" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
2.2 Skills
</a>
</li>
</ul>
</li>
<li>
<a href="#section-3" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
<span class="font-semibold text-gray-300">Section 3:</span> My Work
</a>
<ul class="ml-6 mt-2 space-y-2">
<li>
<a href="#section-3-1" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
3.1 Project Alpha
</a>
</li>
<li>
<a href="#section-3-2" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
3.2 Project Beta
</a>
</li>
<li>
<a href="#section-3-3" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
3.3 Project Gamma
</a>
</li>
</ul>
</li>
<li>
<a href="#section-4" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
<span class="font-semibold text-gray-300">Section 4:</span> Contact
</a>
</li>
</ul>
</div>
</div>
</div>Componentes relacionados
Componente de tabla de contenido
Un componente de tabla de contenido simple, vibrante y receptivo con una sensación de diseño 3D, adecuado para sitios web de viajes / turismo, incluida la compatibilidad con el modo oscuro.
Tabla de contenidos de la Bauhaus Medical
Un componente de tabla de contenido complejo y sensible para aplicaciones médicas/sanitarias, con un diseño funcional inspirado en la Bauhaus con colores apagados y compatibilidad con el modo oscuro. Incluye enlaces de navegación, búsqueda y sección.
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.