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
Componente de tabla de contenido
Un componente simple de tabla de contenido diseñado en estilo Material Design, que utiliza tonos tierra y admite el modo oscuro. Apto para el consumo de contenidos en blogs.
Componente Tabla de contenido 3D
Un componente de tabla de contenido adaptable diseñado para el comercio electrónico, con elementos de diseño 3D y una combinación de colores complementaria. Incluye elementos interactivos y es compatible con el modo oscuro.
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.