Componente de tabla de contenido
Un componente de tabla de contenido receptivo con un diseño de cristal y una combinación de colores pastel, adecuado para paneles con visualización de datos y paneles de control.
Código HTML
<div class="flex flex-col items-center p-5 bg-white rounded-lg shadow-lg glassmorphism dark:bg-gray-800">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Table of Contents</h2>
<ul class="w-full space-y-3">
<li class="p-4 rounded-lg bg-white text-gray-700 shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-700 dark:text-gray-200">
<a href="#section1">Section 1</a>
</li>
<li class="p-4 rounded-lg bg-white text-gray-700 shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-700 dark:text-gray-200">
<a href="#section2">Section 2</a>
</li>
<li class="p-4 rounded-lg bg-white text-gray-700 shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-700 dark:text-gray-200">
<a href="#section3">Section 3</a>
</li>
<li class="p-4 rounded-lg bg-white text-gray-700 shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-700 dark:text-gray-200">
<a href="#section4">Section 4</a>
</li>
<li class="p-4 rounded-lg bg-white text-gray-700 shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-700 dark:text-gray-200">
<a href="#section5">Section 5</a>
</li>
</ul>
<div class="mt-6 w-full">
<img src="https://picsum.photos/300/200" alt="Sample Image" class="w-full h-auto rounded-lg shadow-lg">
</div>
<div class="mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full shadow-lg">
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">User Name</p>
</div>
</div>
Componentes relacionados
Tabla de contenido Componente 34
Un componente de tabla de contenido responsivo con estilo Material Design, con soporte para temas oscuros y uso de Tailwind CSS.
Componente de tabla de contenido
Un componente de tabla de contenido interactivo diseñado para el modo oscuro, con secciones con títulos y marcadores de posición para imágenes y avatares.
Componente de tabla de contenido
Un componente de tabla de contenido limpio, minimalista y receptivo inspirado en la tipografía suiza/internacional, diseñado para sitios de documentación y base de conocimientos, con colores neutros cálidos y soporte completo para el modo oscuro.