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.

Vista previa

Código HTML

<div class="bg-stone-100 dark:bg-stone-900 text-stone-800 dark:text-stone-200 p-6 rounded-lg shadow-lg font-mono">
  <h2 class="text-xl font-bold mb-4">Table of Contents</h2>
  <ul class="space-y-2">
    <li><a href="#section-1" class="hover:underline">1. Introduction</a></li>
    <li><a href="#section-2" class="hover:underline">2. Data Overview</a></li>
    <li>
      <a href="#section-3" class="hover:underline">3. Key Metrics</a>
      <ul class="ml-4 mt-1 space-y-1">
        <li><a href="#section-3-1" class="hover:underline">3.1. Sales Performance</a></li>
        <li><a href="#section-3-2" class="hover:underline">3.2. User Engagement</a></li>
      </ul>
    </li>
    <li><a href="#section-4" class="hover:underline">4. Conclusion</a></li>
  </ul>
</div>

Componentes relacionados

Componente de tabla de contenido

Un componente de tabla de contenido simple, vibrante y receptivo con una sensación de diseño 3D, adecuado para sitios web de viajes / turismo, incluida la compatibilidad con el modo oscuro.

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

Componente de tabla de contenido

Un componente de tabla de contenido receptivo para interfaces de redes sociales, diseñado con una interfaz de usuario de modo oscuro que usa tonos tierra y un diseño simple. Es compatible con el tema oscuro que usa Tailwind CSS y es solo HTML sin JavaScript.

Abrir