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.
Código HTML
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Table of Contents</h2>
<ul class="space-y-3">
<li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded p-2 transition duration-200">
<a href="#section1" class="flex items-center text-gray-600 dark:text-gray-200">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3">
<span class="font-medium">Section 1: Introduction</span>
</a>
</li>
<li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded p-2 transition duration-200">
<a href="#section2" class="flex items-center text-gray-600 dark:text-gray-200">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3">
<span class="font-medium">Section 2: Features</span>
</a>
</li>
<li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded p-2 transition duration-200">
<a href="#section3" class="flex items-center text-gray-600 dark:text-gray-200">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3">
<span class="font-medium">Section 3: Implementation</span>
</a>
</li>
<li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded p-2 transition duration-200">
<a href="#section4" class="flex items-center text-gray-600 dark:text-gray-200">
<img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3">
<span class="font-medium">Section 4: Conclusion</span>
</a>
</li>
</ul>
<div class="mt-6">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Images</h3>
<div class="grid grid-cols-2 gap-4 mt-2">
<img src="https://picsum.photos/200/150?random=1" alt="Random Image 1" class="rounded-lg shadow">
<img src="https://picsum.photos/200/150?random=2" alt="Random Image 2" class="rounded-lg shadow">
<img src="https://picsum.photos/200/150?random=3" alt="Random Image 3" class="rounded-lg shadow">
<img src="https://picsum.photos/200/150?random=4" alt="Random Image 4" class="rounded-lg shadow">
</div>
</div>
</div>Componentes relacionados
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.
Componente de tabla de contenido
Un componente de tabla de contenido interactivo diseñado con el estilo Glassmorphism, con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque, que admite temas claros y oscuros con Tailwind CSS.
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.