组件 目录 复古目录

复古目录

响应式目录组件,具有复古/古典设计,类似色方案和深色模式支持,适合商业/企业网站。使用Tailwind CSS,无需JavaScript。

预览

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>

相关组件

目录组件

一个响应式的目录组件,采用拟物化元素和大地色调设计,适用于作品展示,并支持暗模式。

打开

目录组件

一个响应式目录组件,采用暗黑模式UI风格设计,包括章节、标题、描述和随机的图片/头像。

打开

包豪斯医学目录

用于医疗/保健应用的复杂、响应式目录组件,具有包豪斯风格的功能设计,具有柔和的色彩和深色模式支持。包括导航、搜索和部分链接。

打开