响应式目录组件,具有复古/古典设计,类似色方案和深色模式支持,适合商业/企业网站。使用Tailwind CSS,无需JavaScript。
<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风格设计,包括章节、标题、描述和随机的图片/头像。
用于医疗/保健应用的复杂、响应式目录组件,具有包豪斯风格的功能设计,具有柔和的色彩和深色模式支持。包括导航、搜索和部分链接。