Componente de tabla de contenido
Un componente de tabla de contenido receptivo diseñado en estilo Material Design con tonos tierra y soporte de temas oscuros para sitios web comerciales / corporativos.
Código HTML
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Table of Contents</h2>
<ul class="mt-4 space-y-2">
<li class="flex items-center">
<img src="https://i.pravatar.cc/40" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<a href="#section1" class="text-gray-700 dark:text-gray-300 hover:underline">Section 1</a>
</li>
<li class="flex items-center">
<img src="https://i.pravatar.cc/41" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<a href="#section2" class="text-gray-700 dark:text-gray-300 hover:underline">Section 2</a>
</li>
<li class="flex items-center">
<img src="https://i.pravatar.cc/42" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<a href="#section3" class="text-gray-700 dark:text-gray-300 hover:underline">Section 3</a>
</li>
<li class="flex items-center">
<img src="https://i.pravatar.cc/43" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<a href="#section4" class="text-gray-700 dark:text-gray-300 hover:underline">Section 4</a>
</li>
</ul>
</div>
<div class="bg-gray-200 dark:bg-gray-900 p-6 mt-6 rounded-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Additional Resources</h3>
<ul class="mt-2 space-y-1">
<li>
<a href="#resource1" class="text-gray-600 dark:text-gray-400 hover:underline">Resource 1</a>
</li>
<li>
<a href="#resource2" class="text-gray-600 dark:text-gray-400 hover:underline">Resource 2</a>
</li>
<li>
<a href="#resource3" class="text-gray-600 dark:text-gray-400 hover:underline">Resource 3</a>
</li>
</ul>
</div>Componentes relacionados
Componente de tabla de contenido
Un componente de tabla de contenido receptivo diseñado con neumorfismo usando Tailwind CSS, que ofrece soporte para temas oscuros y muestra imágenes y avatares de marcador de posición.
Componente de tabla de contenido
Un componente de tabla de contenido interactivo diseñado con principios de diseño de materiales mediante CSS de Tailwind, compatible con el modo oscuro y con imágenes y avatares de marcador de posición.
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.