搜索组件

类别

组件侧边导航

侧边导航

位于页面侧边的导航菜单

RetroSidebar导航

一个响应式、简单的复古/复古柔和侧边栏导航组件，适用于商业/公司网站，支持深色模式。

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Sidebar -->
  <div class="w-64 bg-pink-200 dark:bg-purple-800 shadow-md p-4 flex flex-col justify-between">
    <div>
      <div class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-6 font-mono">ByteCorp</div>
      <nav>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg">
          Dashboard
        </a>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg mt-2">
          Analytics
        </a>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg mt-2">
          Reports
        </a>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg mt-2">
          Settings
        </a>
      </nav>
    </div>
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
      <div class="text-gray-800 dark:text-gray-100 font-semibold">John Doe</div>
    </div>
  </div>

  <!-- Content Area (for demonstration purposes) -->
  <div class="flex-1 p-8">
    <h1 class="text-4xl font-bold text-gray-800 dark:text-gray-100 mb-6 font-mono">Welcome to ByteCorp Dashboard</h1>
    <p class="text-gray-700 dark:text-gray-300 text-lg">This is a simple content area. The sidebar is on the left.</p>
  </div>
</div>

Glassmorphism 侧边栏导航组件

用于博客的 Glassmorphism 风格的侧边栏导航组件，具有单色配色方案。这是一个简单的响应式设计，支持深色模式，仅使用 HTML 和 Tailwind CSS。侧边栏包括站点标题、导航链接和配置文件部分。

打开预览

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col md:flex-row">

  <!-- Sidebar -->
  <div class="w-full md:w-64 bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg p-5 shadow-lg md:min-h-screen">
    <div class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6">MyBlog</div>
    <nav>
      <a href="#" class="block py-2 px-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white transition duration-300 ease-in-out">
        Home
      </a>
      <a href="#" class="block py-2 px-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white transition duration-300 ease-in-out mt-2">
        Articles
      </a>
      <a href="#" class="block py-2 px-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white transition duration-300 ease-in-out mt-2">
        Categories
      </a>
      <a href="#" class="block py-2 px-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white transition duration-300 ease-in-out mt-2">
        About
      </a>
      <a href="#" class="block py-2 px-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white transition duration-300 ease-in-out mt-2">
        Contact
      </a>
    </nav>

    <div class="mt-8 pt-8 border-t border-gray-300 dark:border-gray-700">
      <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-blue-400">
        <div class="ml-3">
          <p class="text-gray-800 dark:text-gray-200 font-medium">John Doe</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Blogger</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Main Content (Placeholder for blog content) -->
  <div class="flex-1 p-8">
    <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-6">Welcome to MyBlog!</h1>
    <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
      This is a placeholder for your blog content. The sidebar on the left demonstrates a Glassmorphism-style navigation.
      It's responsive, adapts to dark mode, and uses a monochromatic color scheme for a clean and modern look.
      Explore the navigation links to imagine various sections of your blog.
    </p>
    
    <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg p-6 rounded-lg shadow-lg">
            <img src="https://picsum.photos/seed/blog1/400/250" alt="Blog Post 1" class="rounded-lg mb-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">My First Awesome Post</h2>
            <p class="text-gray-700 dark:text-gray-300 text-sm">A short description of the first amazing blog post. Click to read more!</p>
        </div>
        <div class="bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg p-6 rounded-lg shadow-lg">
            <img src="https://picsum.photos/seed/blog2/400/250" alt="Blog Post 2" class="rounded-lg mb-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Another Great Article</h2>
            <p class="text-gray-700 dark:text-gray-300 text-sm">Discover more insights in this compelling second article.</p>
        </div>
    </div>
  </div>

</div>

侧边栏导航组件

适用于社交媒体应用程序的简单响应式侧边栏导航，针对深色模式进行了优化，具有类似的配色方案。它包括一个带有头像和用户名的个人资料部分，以及导航链接。该设计使用 Tailwind CSS 进行样式设置和响应，并通过 Tailwind 的内置 dark：前缀提供深色模式支持。

打开预览

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900">

  <!-- Sidebar for Social Media -->
  <div class="flex flex-col w-64 bg-gray-800 dark:bg-gray-950 text-white shadow-lg">
    <div class="flex items-center justify-center h-20 shadow-md">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="h-10 w-10 rounded-full border-2 border-purple-400 dark:border-purple-600">
      <span class="ml-2 text-lg font-semibold text-purple-300 dark:text-purple-500">SocialNet</span>
    </div>
    <nav class="flex-1 px-2 py-4 space-y-2">
      <a href="#" class="flex items-center px-4 py-2 text-gray-300 dark:text-gray-400 hover:bg-gray-700 dark:hover:bg-gray-800 rounded-lg group transition duration-200">
        <svg class="h-5 w-5 mr-3 text-purple-400 dark:text-purple-600 group-hover:text-purple-300 dark:group-hover:text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m7 0V3m0 8V3"></path></svg>
        Home
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-gray-300 dark:text-gray-400 hover:bg-gray-700 dark:hover:bg-gray-800 rounded-lg group transition duration-200">
        <svg class="h-5 w-5 mr-3 text-purple-400 dark:text-purple-600 group-hover:text-purple-300 dark:group-hover:text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2m2 0h11m-9.991-10H2a2 2 0 01-2-2V7H2a2 2 0 012-2h4a2 2 0 012 2v3a2 2 0 01-2 2-2 2 0 01-3 0zm4.5 0"></path></svg>
        Profile
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-gray-300 dark:text-gray-400 hover:bg-gray-700 dark:hover:bg-gray-800 rounded-lg group transition duration-200">
        <svg class="h-5 w-5 mr-3 text-purple-400 dark:text-purple-600 group-hover:text-purple-300 dark:group-hover:text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
        Messages
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-gray-300 dark:text-gray-400 hover:bg-gray-700 dark:hover:bg-gray-800 rounded-lg group transition duration-200">
        <svg class="h-5 w-5 mr-3 text-purple-400 dark:text-purple-600 group-hover:text-purple-300 dark:group-hover:text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17c0 .538-.256.958-.553 1.196C14.152 18.068 13.57 18 13 18c-.482 0-.962-.06-1.428-.182a3 3 0 01-2.434-1.298M15 17a2 2 0 00-2-2H9.688m1.325.75c.983-.39 1.688-.718 1.688-1.554 0-.845-.582-1.39-1.5-1.39-.915 0-1.5.545-1.5 1.39 0 1.2.668 1.57 1.5 1.57M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        Notifications
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-gray-300 dark:text-gray-400 hover:bg-gray-700 dark:hover:bg-gray-800 rounded-lg group transition duration-200">
        <svg class="h-5 w-5 mr-3 text-purple-400 dark:text-purple-600 group-hover:text-purple-300 dark:group-hover:text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37a1.724 1.724 0 002.572-1.065z"></path></svg>
        Settings
      </a>
    </nav>
    <div class="mt-auto px-4 py-4 border-t border-gray-700 dark:border-gray-800">
      <a href="#" class="flex items-center px-4 py-2 text-gray-300 dark:text-gray-400 hover:bg-gray-700 dark:hover:bg-gray-800 rounded-lg group transition duration-200">
        <svg class="h-5 w-5 mr-3 text-purple-400 dark:text-purple-600 group-hover:text-purple-300 dark:group-hover:text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
        Logout
      </a>
    </div>
  </div>

  <!-- Main Content Area (Optional, for context) -->
  <div class="flex-1 flex flex-col">
    <header class="h-20 flex items-center px-6 shadow-md bg-white dark:bg-gray-800">
      <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Dashboard</h1>
    </header>
    <main class="flex-1 p-6 overflow-y-auto bg-gray-100 dark:bg-gray-900">
      <div class="border-4 border-dashed border-gray-300 dark:border-gray-700 rounded-lg h-full p-4 text-gray-700 dark:text-gray-300 text-center flex items-center justify-center">
        Main content goes here. This is a placeholder for your social media feed or other content.
      </div>
    </main>
  </div>

</div>

侧边栏导航

响应式侧边栏导航组件，具有模拟配色方案和微交互，包括深色主题支持。

打开预览

                <div class="flex h-screen bg-gray-100 dark:bg-gray-800">

    <!-- Sidebar -->
    <div class="w-64 bg-teal-500 dark:bg-teal-700 text-white flex flex-col">
        <div class="p-4 text-center text-2xl font-bold">Dashboard</div>
        <nav class="mt-6">
            <a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Home</a>
            <a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Analytics</a>
            <a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Reports</a>
            <a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Settings</a>
        </nav>
    </div>

    <!-- Content area -->
    <div class="flex-1 p-10 text-gray-800 dark:text-gray-200">
        <h1 class="text-3xl font-bold mb-6">Welcome to the Dashboard</h1>
        <p>This is the main content area.</p>
    </div>

</div>

侧边栏导航组件

一个简单且响应迅速的侧边栏导航组件，专为仪表板设计，具有引人入胜的动画和朴实的配色方案。它支持深色模式。

打开预览

                <div class="flex flex-col h-screen bg-gray-200 dark:bg-gray-800 border-r border-gray-300 dark:border-gray-700 shadow-lg transition-transform duration-300 ease-in-out">
    <div class="flex items-center justify-center h-16 border-b border-gray-300 dark:border-gray-700 bg-green-600 dark:bg-green-800">
        <h1 class="text-xl text-white font-bold">Dashboard</h1>
    </div>
    <nav class="flex-1 p-4">
        <ul class="space-y-2">
            <li>
                <a href="#" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-green-500 dark:hover:bg-green-700 rounded transition-all duration-300 ease-in-out">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                    <span>Profile</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-green-500 dark:hover:bg-green-700 rounded transition-all duration-300 ease-in-out">
                    <img src="https://picsum.photos/seed/pic1/30/30" alt="Image 1" class="w-8 h-8 rounded-full mr-2">
                    <span>Reports</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-green-500 dark:hover:bg-green-700 rounded transition-all duration-300 ease-in-out">
                    <img src="https://picsum.photos/seed/pic2/30/30" alt="Image 2" class="w-8 h-8 rounded-full mr-2">
                    <span>Settings</span>
                </a>
            </li>
        </ul>
    </nav>
    <div class="p-4 border-t border-gray-300 dark:border-gray-700">
        <a href="#" class="block text-center text-gray-700 dark:text-gray-300 hover:bg-green-500 dark:hover:bg-green-700 rounded p-2 transition-all duration-300 ease-in-out">Logout</a>
    </div>
</div>

社交媒体侧边导航组件

响应式社交媒体侧边栏导航组件，支持深色主题，使用粗野主义、大地色调和复杂设计原则。无需 JavaScript。

打开预览

                <div class="flex h-screen bg-stone-100 dark:bg-stone-900">

  <!-- Sidebar -->
  <div class="w-64 bg-stone-300 dark:bg-stone-800 p-6 space-y-6 transform -translate-x-full md:translate-x-0 transition-transform duration-200 ease-in-out" id="sidebar">
    
    <!-- Profile Section -->
    <div class="flex items-center space-x-4">
      <img class="w-12 h-12 rounded-full border-4 border-stone-900 dark:border-stone-100" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
      <div>
        <h2 class="text-xl font-bold text-stone-900 dark:text-stone-100">Username</h2>
        <p class="text-sm text-stone-700 dark:text-stone-300">@userhandle</p>
      </div>
    </div>

    <hr class="border-stone-900 dark:border-stone-100">

    <!-- Navigation -->
    <nav class="space-y-4">
      <a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Feed</a>
      <a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Profile</a>
      <a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Messages</a>
      <a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Notifications</a>
      <a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Settings</a>
    </nav>

    <hr class="border-stone-900 dark:border-stone-100">

    <!-- Footer Links -->
    <div class="flex flex-wrap gap-2 text-sm text-stone-700 dark:text-stone-300">
      <a href="#" class="hover:underline focus:underline">About</a>
      <a href="#" class="hover:underline focus:underline">Help</a>
      <a href="#" class="hover:underline focus:underline">Terms</a>
      <a href="#" class="hover:underline focus:underline">Privacy</a>
    </div>

  </div>

  <!-- Content Area - Example -->
  <div class="flex-1 p-6">
    <h1 class="text-2xl font-bold text-stone-900 dark:text-stone-100">Main Content Area</h1>
    </div>

</div>

侧边导航组件

为博客量身定制的侧边栏导航组件，采用 3D 元素和鲜艳的色彩设计。支持深色模式并且是响应式的，具有适合内容使用的简单布局。

打开预览

                <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 h-screen sticky top-0">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Navigation</h2>
    <ul class="space-y-4">
        <li>
            <a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150"> 
                <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
                <span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Home</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150"> 
                <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
                <span class="ml-2 font-medium text-gray-700 dark:text-gray-300">About</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150"> 
                <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
                <span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Blog</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150"> 
                <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
                <span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Contact</span>
            </a>
        </li>
    </ul>
</div>

侧边栏导航组件

一个响应式侧边栏导航组件，具有 3D 设计元素、相似的配色方案和具有交互功能的中等复杂性。适用于博客或内容网站。

打开预览

                <!-- Responsive Sidebar Navigation Component -->
<div class="flex h-screen bg-gray-100 dark:bg-gray-900">

    <!-- Sidebar -->
    <div class="bg-gradient-to-br from-blue-500 to-purple-600 dark:from-blue-700 dark:to-purple-900 text-white w-64 space-y-6 py-7 px-2 absolute inset-y-0 left-0 transform -translate-x-full md:relative md:translate-x-0 transition duration-200 ease-in-out shadow-lg">
        <div class="text-white flex items-center justify-between px-4">
            <span class="text-2xl font-extrabold italic">Blog Menu</span>
            <!-- Mobile menu button -->
            <button class="text-white focus:outline-none md:hidden" onclick="document.querySelector('.translate-x-full').classList.toggle('translate-x-full');">
                <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                </svg>
            </button>
        </div>

        <!-- Nav Links -->
        <nav>
            <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 dark:hover:bg-blue-900 hover:text-white transform hover:scale-105 shadow-md mb-2">
                <i class="fas fa-home mr-3"></i> Home
            </a>
            <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 hover:text-white transform hover:scale-105 shadow-md mb-2">
                <i class="fas fa-th-large mr-3"></i> Categories
            </a>
            <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 dark:hover:bg-blue-900 hover:text-white transform hover:scale-105 shadow-md mb-2">
                <i class="fas fa-bookmark mr-3"></i> Bookmarks
            </a>
            <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 hover:text-white transform hover:scale-105 shadow-md mb-2">
                <i class="fas fa-user mr-3"></i> Profile
            </a>
            <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 dark:hover:bg-blue-900 hover:text-white transform hover:scale-105 shadow-md">
                <i class="fas fa-cog mr-3"></i> Settings
            </a>
        </nav>

        <!-- Footer/User Info (Optional) -->
        <div class="absolute inset-x-0 bottom-0 p-4">
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full border-2 border-white mr-3">
                <div class="text-sm">
                    <p class="font-semibold">John Doe</p>
                    <p class="text-gray-200 dark:text-gray-400">View Profile</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content Area -->
    <div class="flex-1 p-10 text-2xl font-bold">
        <!-- Your main content goes here -->
        Main Content
    </div>
    
</div>

玻璃态边栏导航

用于投资组合的 Glassmorphism 风格的响应式侧边栏导航组件，具有深色模式支持和类似的配色方案。具有磨砂玻璃效果和仅使用 HTML 和 Tailwind CSS 的多个交互式元素。

打开预览

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900">

  <!-- Backdrop -->
  <div id="sidebarBackdrop" class="fixed inset-0 z-40 lg:hidden transition-opacity duration-300 ease-linear opacity-0 pointer-events-none bg-black bg-opacity-25"></div>

  <!-- Sidebar -->
  <div id="sidebar" class="fixed inset-y-0 left-0 z-50 w-64 bg-white/20 dark:bg-gray-800/20 backdrop-filter backdrop-blur-lg border-r border-white/30 dark:border-gray-700/30 transform -translate-x-full lg:translate-x-0 lg:static lg:inset-0 transition-transform duration-300 ease-in-out">

    <div class="flex items-center justify-center h-20 border-b border-white/30 dark:border-gray-700/30">
      <h1 class="text-2xl font-bold text-gray-800 dark:text-white">Portfolio</h1>
    </div>

    <nav class="flex-1 px-2 py-4 space-y-2">
      <a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-white/30 dark:hover:bg-gray-700/30 rounded-lg">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7M19 10v10a1 1 0 01-1 1h-3m-2-7a2 2 0 11-4 0 2 2 0 014 0z" />
        </svg>
        Home
      </a>

      <a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-white/30 dark:hover:bg-gray-700/30 rounded-lg">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
        </svg>
        About
      </a>

      <a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-white/30 dark:hover:bg-gray-700/30 rounded-lg">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
        </svg>
        Projects
      </a>

      <a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-white/30 dark:hover:bg-gray-700/30 rounded-lg">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
        </svg>
        Contact
      </a>
    </nav>

    <div class="absolute bottom-0 left-0 w-full p-4 border-t border-white/30 dark:border-gray-700/30">
      <div class="flex items-center">
        <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
        <div class="text-sm">
          <p class="font-semibold text-gray-800 dark:text-white">John Doe</p>
          <p class="text-gray-600 dark:text-gray-400">Web Developer</p>
        </div>
      </div>
    </div>

  </div>

  <!-- Content Area (for demonstration) -->
  <div class="flex-1 p-10">
    <h1 class="text-3xl font-bold text-gray-800 dark:text-white">Main Content</h1>
    <p class="mt-4 text-gray-600 dark:text-gray-400">This is the main content area. The sidebar is on the left.</p>
  </div>

</div>

侧边栏导航组件 - 灰度

响应式侧边栏导航组件

打开预览

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900">
    <!-- Sidebar -->
    <div class="flex flex-col w-64 bg-white dark:bg-gray-800 shadow-lg">
        <div class="flex items-center justify-center h-16 shadow-md">
            <span class="text-xl font-semibold text-gray-700 dark:text-white">Company Name</span>
        </div>
        <div class="flex flex-col flex-1 overflow-y-auto">
            <nav class="flex-1 px-2 py-4 bg-gray-200 dark:bg-gray-700">
                <a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 rounded">
                    <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
                    Dashboard
                </a>
                <a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 rounded">
                    <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
                    Projects
                </a>
                <a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 rounded">
                    <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
                    Team
                </a>
                <a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 rounded">
                    <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.23-.14.447-.297.66-.48z"></path></svg>
                    Settings
                </a>
            </nav>
        </div>
    </div>
    <!-- Main content (placeholder) -->
    <div class="flex flex-col flex-1 overflow-y-auto">
        <div class="h-16 bg-white dark:bg-gray-800 shadow-md"></div>
        <div class="p-4">
            <!-- Your main content goes here -->
        </div>
    </div>
</div>