Componentes Tabla de contenidos Componente de tabla de contenido

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.

Vista previa

Código HTML

<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-semibold text-green-800 dark:text-green-200 mb-4">Table of Contents</h2>
    <ul class="space-y-4">
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section1" class="text-gray-800 dark:text-gray-200 font-semibold">Section 1</a>
        </li>
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section2" class="text-gray-800 dark:text-gray-200 font-semibold">Section 2</a>
        </li>
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section3" class="text-gray-800 dark:text-gray-200 font-semibold">Section 3</a>
        </li>
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section4" class="text-gray-800 dark:text-gray-200 font-semibold">Section 4</a>
        </li>
    </ul>
</div>

Componentes relacionados

3D_Music_TOC_Component

Un componente de tabla de contenido complejo, de alto contraste e inspirado en 3D para plataformas de música/audio, con diseño receptivo y compatibilidad con modo oscuro.

Abrir

Bauhaus_Retro_Photography_TOC

Un componente de tabla de contenido complejo y receptivo para sitios web de fotografía, inspirado en los principios de diseño de la Bauhaus y una paleta de colores retro/vintage. Cuenta con formas geométricas, colores apagados y compatibilidad con el modo oscuro completo, ideal para galerías de fotos y portafolios.

Abrir

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.

Abrir