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
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.
Tabla de contenidos de la Bauhaus Medical
Un componente de tabla de contenido complejo y sensible para aplicaciones médicas/sanitarias, con un diseño funcional inspirado en la Bauhaus con colores apagados y compatibilidad con el modo oscuro. Incluye enlaces de navegación, búsqueda y sección.