Components Table of Contents Retro Table of Contents

Retro Table of Contents

Responsive Table of Contents Component with Retro/Vintage design, Analogous color scheme, and dark mode support. Suitable for Business/Corporate websites. Uses Tailwind CSS with no JavaScript.

Preview

HTML Code

<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>

Related Components

Table of Contents Component

Responsive Table of Contents component with dark mode support using Tailwind CSS. The component is designed for a portfolio purpose, featuring a monochromatic color scheme and a moderate complexity level without JavaScript.

Open

A responsive Table of Contents component styled with Glassmorphism, featuring frosted glass-like translucent elements with blur effects and dark theme support. Includes sections and placeholder images for visual representation.

Open

3D Table of Contents Component

A responsive Table of Contents component designed for e-commerce, featuring 3D design elements and a complementary color scheme. It includes interactive elements and supports dark mode.

Open