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
RetroEarthDashboardTOC
Componente de tabla de contenido receptivo con diseño retro/vintage, combinación de colores en tonos tierra y compatibilidad con el modo oscuro para el uso del tablero.
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.
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.