Componentes Tabla de contenidos Tabla de contenido Componente 34

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.

Vista previa

Código HTML

<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-md mx-auto">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Table of Contents</h2>
    <ul class="space-y-2">
        <li>
            <a href="#section1" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                Section 1
            </a>
        </li>
        <li>
            <a href="#section2" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                Section 2
            </a>
        </li>
        <li>
            <a href="#section3" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                Section 3
            </a>
        </li>
        <li>
            <a href="#section4" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                Section 4
            </a>
        </li>
        <li>
            <a href="#section5" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                Section 5
            </a>
        </li>
    </ul>
</div>

Componentes relacionados

Monospace_Developer_TOC

Un componente de tabla de contenido complejo y receptivo con una estética monoespaciada/de desarrollador, esquema de color en tono joya, optimizado para sitios de documentación y base de conocimientos, con soporte para modo oscuro.

Abrir

RetroEarthDashboardTOC

Componente de tabla de contenido receptivo con diseño retro/vintage, combinación de colores en tonos tierra y compatibilidad con el modo oscuro para el uso del tablero.

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