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.
Código HTML
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-md mx-auto">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Table of Contents</h2>
<ul class="space-y-2">
<li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition duration-200">
<a href="#section1" class="block text-gray-800 dark:text-gray-200 p-3 rounded-md">1. Introduction</a>
</li>
<li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition duration-200">
<a href="#section2" class="block text-gray-800 dark:text-gray-200 p-3 rounded-md">2. Overview of the Topic</a>
</li>
<li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition duration-200">
<a href="#section3" class="block text-gray-800 dark:text-gray-200 p-3 rounded-md">3. In-Depth Analysis</a>
</li>
<li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition duration-200">
<a href="#section4" class="block text-gray-800 dark:text-gray-200 p-3 rounded-md">4. Conclusion</a>
</li>
</ul>
</div>Componentes relacionados
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.
Tabla de contenido Componente - Reserva/Reserva
Un componente de tabla de contenido simple y receptivo para sistemas de reservas, con colores en escala de grises y sutiles transiciones de degradado. Incluye soporte para modo oscuro.
Tabla de contenido Componente 34
Un componente de tabla de contenido responsivo con estilo Material Design, con soporte para temas oscuros y uso de Tailwind CSS.