组件 导航 复古导航

复古导航

一个简单、响应式且兼容暗黑模式的导航组件,采用复古/古典设计,色彩鲜艳,元素简约,适合电子商务网站。

预览

HTML 代码

<nav class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600 p-4">
  <div class="container mx-auto flex items-center justify-between">
    <div class="text-white text-2xl font-bold">RetroShop</div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="text-white hover:text-gray-200">Home</a>
      <a href="#" class="text-white hover:text-gray-200">Products</a>
      <a href="#" class="text-white hover:text-gray-200">About</a>
      <a href="#" class="text-white hover:text-gray-200">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="text-white">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
        </svg>
      </button>
    </div>
  </div>
</nav>

相关组件

拟物导航组件

一个拟物导航组件,旨在模仿现实世界的元素,如物理控制面板或仪表板。具有响应式设计,悬停效果模拟物理按钮按压,支持暗黑主题。导航包括微妙的阴影、渐变和纹理,营造出3D的触感外观,令人想起物理接口。

打开

Neumorphism 导航组件

针对 Portfolio 网站优化的 Neumorphism 导航组件。它具有具有多个交互式元素的复杂布局、响应式设计以及使用 Tailwind CSS 的深色模式支持。配色方案为 Analogous。

打开

玻璃化导航组件

一个用于电子商务网站的玻璃摩尔风格导航组件,具有单色彩色、响应式设计和使用 Tailwind CSS 的暗模式支持。

打开