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
Un componente de tabla de contenido minimalista y receptivo diseñado con Tailwind CSS, compatible con el modo oscuro y con elementos de diseño limpios.
Componente de tabla de contenido
Un componente de tabla de contenido simple y receptivo con efectos de neón/brillo y un esquema de color otoñal, adecuado para portafolios o galerías de fotografía, incluida la compatibilidad con el modo oscuro.
Retro Tabla de contenidos
Componente de tabla de contenido receptivo con diseño retro / vintage, combinación de colores análoga y compatibilidad con modo oscuro. Adecuado para sitios web comerciales / corporativos. Utiliza Tailwind CSS sin JavaScript.