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.
Código HTML
<div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-4">Table of Contents</h2>
<ul class="space-y-3">
<li class="hover:bg-gray-800 rounded p-2 transition duration-300">
<h3 class="font-semibold">Section 1</h3>
<p class="text-gray-400">Description of Section 1</p>
<img src="https://picsum.photos/200/100?random=1" alt="Random Image" class="mt-2 rounded" />
</li>
<li class="hover:bg-gray-800 rounded p-2 transition duration-300">
<h3 class="font-semibold">Section 2</h3>
<p class="text-gray-400">Description of Section 2</p>
<img src="https://picsum.photos/200/100?random=2" alt="Random Image" class="mt-2 rounded" />
</li>
<li class="hover:bg-gray-800 rounded p-2 transition duration-300">
<h3 class="font-semibold">Section 3</h3>
<p class="text-gray-400">Description of Section 3</p>
<img src="https://picsum.photos/200/100?random=3" alt="Random Image" class="mt-2 rounded" />
</li>
</ul>
<div class="mt-5 border-t border-gray-700 pt-4">
<h4 class="font-semibold">Author</h4>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3" />
<span class="text-gray-400">John Doe</span>
</div>
</div>
</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.
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.
Tabla de contenidos
Un componente de tabla de contenido interactivo con estilo Glassmorphism, con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque y compatibilidad con temas oscuros. Incluye secciones e imágenes de marcador de posición para la representación visual.