Components Table of Contents RetroEarthDashboardTOC

RetroEarthDashboardTOC

Responsive Table of Contents component with Retro/Vintage design, Earth tones color scheme, and dark mode support for dashboard use.

Preview

HTML Code

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

Related Components

Table of Contents Component

A responsive Table of Contents component with a glassmorphism design and pastel color scheme, suitable for dashboards with data visualization and control panels.

Open

Table of Contents Component with Microinteractions design, Analogous color scheme, Simple complexity, and Social Media purpose. Responsive with dark theme support. No JavaScript code.

Open

Table of Contents Component

A simple, vibrant, and responsive Table of Contents component with a 3D design feel, suitable for travel/tourism websites, including dark mode support.

Open