Componentes Tabla de contenidos Retro Tabla de contenidos

Retro Tabla de contenidos

Componente de tabla de contenido receptivo con diseño retro / vintage, combinación de colores análoga y compatibilidad con modo oscuro. Adecuado para sitios web comerciales / corporativos. Utiliza Tailwind CSS sin JavaScript.

Vista previa

Código HTML

<div class="bg-gray-200 dark:bg-gray-800 retro-analogous-colors p-6 rounded-lg shadow-lg">
  <h2 class="text-xl font-bold mb-4 dark:text-white">Table of Contents</h2>
  <ul class="space-y-2">
    <li><a href="#section-1" class="text-blue-800 dark:text-blue-300 hover:underline">Section 1: Introduction</a></li>
    <li><a href="#section-2" class="text-blue-800 dark:text-blue-300 hover:underline">Section 2: Getting Started</a></li>
    <li><a href="#section-3" class="text-blue-800 dark:text-blue-300 hover:underline">Section 3: Core Concepts</a></li>
    <li><a href="#section-4" class="text-blue-800 dark:text-blue-300 hover:underline">Section 4: Advanced Topics</a></li>
    <li><a href="#section-5" class="text-blue-800 dark:text-blue-300 hover:underline">Section 5: Conclusion</a></li>
  </ul>
</div>

<style>
  .retro-analogous-colors {
    /* Define your retro analogous colors here using Tailwind's custom colors or by extending the theme */
    /* Example (you would define these in your tailwind.config.js): */
    /* background-color: theme('colors.retro-light'); */
    /* color: theme('colors.retro-dark'); */
  }

  .dark .retro-analogous-colors {
     /* background-color: theme('colors.retro-dark'); */
     /* color: theme('colors.retro-light'); */
  }
</style>

Componentes relacionados

Componente de tabla de contenido

Un componente de tabla de contenido interactivo diseñado para el modo oscuro, con secciones con títulos y marcadores de posición para imágenes y avatares.

Abrir

Componente de tabla de contenido

Un componente de tabla de contenido limpio, minimalista y receptivo inspirado en la tipografía suiza/internacional, diseñado para sitios de documentación y base de conocimientos, con colores neutros cálidos y soporte completo para 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