组件 目录 目录组件

目录组件

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

预览

HTML 代码

<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-semibold text-green-800 dark:text-green-200 mb-4">Table of Contents</h2>
    <ul class="space-y-4">
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section1" class="text-gray-800 dark:text-gray-200 font-semibold">Section 1</a>
        </li>
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section2" class="text-gray-800 dark:text-gray-200 font-semibold">Section 2</a>
        </li>
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section3" class="text-gray-800 dark:text-gray-200 font-semibold">Section 3</a>
        </li>
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section4" class="text-gray-800 dark:text-gray-200 font-semibold">Section 4</a>
        </li>
    </ul>
</div>

相关组件

Glassmorphism_RealEstate_TableOfContents

用于房地产列表的 glassmorphism 样式的目录组件,具有半透明元素、模糊效果和紫色/紫色配色方案。它响应式并支持深色模式。

打开

目录组件

使用Tailwind CSS的响应式目录组件,支持暗黑模式。该组件设计用于作品集,具有单色配色方案和适中的复杂性水平,无需JavaScript。

打开

目录组件

一个响应式目录组件,采用玻璃拟态设计和粉彩色调,适用于包含数据可视化和控制面板的仪表盘。

打开