Tabla de contenidos
Un componente de tabla de contenido interactivo con estilo Glassmorphism, con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque y compatibilidad con temas oscuros. Incluye secciones e imágenes de marcador de posición para la representación visual.
Código HTML
<div class="bg-white bg-opacity-30 backdrop-blur-md shadow-lg rounded-lg p-6">
<h2 class="text-2xl font-bold mb-4">Table of Contents</h2>
<ul class="space-y-3">
<li class="p-4 bg-white bg-opacity-20 backdrop-blur-md rounded-lg hover:bg-opacity-30 transition duration-200">
<a href="#section1" class="text-gray-900 dark:text-white">Introduction</a>
</li>
<li class="p-4 bg-white bg-opacity-20 backdrop-blur-md rounded-lg hover:bg-opacity-30 transition duration-200">
<a href="#section2" class="text-gray-900 dark:text-white">Features</a>
</li>
<li class="p-4 bg-white bg-opacity-20 backdrop-blur-md rounded-lg hover:bg-opacity-30 transition duration-200">
<a href="#section3" class="text-gray-900 dark:text-white">Installation</a>
</li>
<li class="p-4 bg-white bg-opacity-20 backdrop-blur-md rounded-lg hover:bg-opacity-30 transition duration-200">
<a href="#section4" class="text-gray-900 dark:text-white">Usage</a>
</li>
<li class="p-4 bg-white bg-opacity-20 backdrop-blur-md rounded-lg hover:bg-opacity-30 transition duration-200">
<a href="#section5" class="text-gray-900 dark:text-white">Conclusion</a>
</li>
</ul>
<div class="mt-6">
<img src="https://picsum.photos/400/200?random=1" alt="Placeholder Image" class="w-full h-auto rounded-lg">
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
<span class="ml-3 text-gray-700 dark:text-gray-300">User Name</span>
</div>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.bg-white {
background-color: rgba(255, 255, 255, 0.1);
}
.text-gray-900 {
color: white;
}
.text-gray-700 {
color: #e0e0e0;
}
}
</style>Componentes relacionados
Componente de tabla de contenido
Un componente responsivo de la tabla de contenido diseñado con elementos skeuomórficos y tonos tierra para una presentación de cartera, con soporte para el modo oscuro.
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.
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.