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.
Código HTML
<nav class="p-4 bg-gray-900 text-stone-200 min-h-screen dark:bg-gray-900">
<h2 class="text-xl font-bold mb-4 text-stone-100">Table of Contents</h2>
<ul class="space-y-2">
<li><a href="#section-1" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Introduction</a></li>
<li><a href="#section-2" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Getting Started</a></li>
<li><a href="#section-3" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">User Profiles</a></li>
<li><a href="#section-4" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Creating Posts</a></li>
<li><a href="#section-5" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Interacting with Content</a></li>
<li><a href="#section-6" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Privacy Settings</a></li>
<li><a href="#section-7" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Notifications</a></li>
<li><a href="#section-8" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Troubleshooting</a></li>
</ul>
</nav>Componentes relacionados
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.
Retro Candy Tabla de contenidos
Un componente de tabla de contenido de temática retro nostálgico con una combinación de colores inspirada en los dulces, adecuada para sitios web de alimentos y restaurantes. Cuenta con una navegación "pegajosa" similar a una barra lateral con indicadores de desplazamiento suave y soporte para el modo oscuro.
Componente de tabla de contenido
Un componente simple de tabla de contenido diseñado en estilo Material Design, que utiliza tonos tierra y admite el modo oscuro. Apto para el consumo de contenidos en blogs.