Componentes Tabla de contenidos Tabla de contenidos

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.

Vista previa

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

Tabla de contenidos

Tabla de contenido Componente con diseño de microinteracciones, combinación de colores análoga, complejidad simple y propósito de redes sociales. Responsivo con soporte para temas oscuros. Sin código JavaScript.

Abrir

Componente de tabla de contenido

Un componente de tabla de contenido receptivo con diseño de materiales con colores vibrantes, adecuado para blogs y consumo de contenido, que incluye soporte para modo oscuro y múltiples elementos interactivos.

Abrir

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.

Abrir