目录

具有微交互设计、相似配色方案、简单复杂性和社交媒体用途的目录组件。响应式,支持深色主题。没有 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>

相关组件

目录组件

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

打开

目录

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

打开

目录组件 34

一种使用材料设计风格的响应式目录组件,支持黑暗主题,并使用Tailwind CSS。

打开