目录

具有微交互设计、相似配色方案、简单复杂性和社交媒体用途的目录组件。响应式,支持深色主题。没有 JavaScript 代码。

预览

HTML 代码

<nav class="p-4 bg-gray-100 dark:bg-gray-800">
  <ul class="space-y-2">
    <li><a href="#section1" class="block py-2 px-4 text-gray-700 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out transform hover:scale-105">Section 1</a></li>
    <li><a href="#section2" class="block py-2 px-4 text-gray-700 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out transform hover:scale-105">Section 2</a></li>
    <li><a href="#section3" class="block py-2 px-4 text-gray-700 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out transform hover:scale-105">Section 3</a></li>
  </ul>
</nav>

相关组件

目录

一个响应式目录组件,采用玻璃态风格,具有磨砂玻璃般的半透明元素和模糊效果,支持暗主题。包含部分和视觉表示的占位符图像。

打开

3D目录组件

专为电子商务设计的响应式目录组件,具有 3D 设计元素和互补配色方案。它包括交互元素并支持深色模式。

打开

目录组件

响应式 Table of Contents 组件,具有拟物化设计、三元配色方案和深色主题支持,适用于社交媒体界面。没有 JavaScript,只有 HTML 和 Tailwind CSS。

打开