搜索组件

类别

组件侧边栏

侧边栏

页面侧边的内容区域

侧边栏组件

一个响应式侧边栏组件，采用玻璃形态效果和互补色方案，适合于博客或内容消费。

                <aside class="bg-white bg-opacity-30 backdrop-blur-lg shadow-md rounded-lg p-4 w-64 dark:bg-gray-800 dark:bg-opacity-30">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">User Name</h2>
    </div>
    <nav>
        <ul class="space-y-2">
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Home</a>
            </li>
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">About</a>
            </li>
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Blog</a>
            </li>
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Contact</a>
            </li>
        </ul>
    </nav>
    <div class="mt-4">
        <h3 class="text-md font-semibold text-gray-800 dark:text-white">Featured Posts</h3>
        <ul class="space-y-2">
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Post Title 1</a>
            </li>
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Post Title 2</a>
            </li>
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Post Title 3</a>
            </li>
        </ul>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/300/200" alt="Sample Image" class="rounded-lg shadow-md">
    </div>
</aside>

侧边栏组件

一个响应式侧边栏组件，采用复古/古典风格，适用于仪表板布局，设有鲜艳色彩。支持暗黑模式。

打开预览

                <div class="flex flex-col w-64 h-screen p-4 bg-blue-600 text-white dark:bg-blue-900">
    <h2 class="text-2xl font-bold mb-6 text-yellow-500">Dashboard</h2>
    <div class="flex flex-col space-y-4">
        <a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Home</a>
        <a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Reports</a>
        <a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Analytics</a>
        <a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Settings</a>
    </div>
    <div class="mt-auto pt-4 border-t border-gray-300 dark:border-gray-700">
        <div class="flex items-center space-x-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <span class="text-sm font-semibold">John Doe</span>
        </div>
    </div>
</div>

电子商务侧边栏

适用于电子商务的响应式玻璃拟态侧边栏，支持暗模式

打开预览

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

    <!-- Glassmorphism Sidebar -->
    <div class="w-64 px-2 py-6 bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-30 dark:backdrop-filter dark:backdrop-blur-lg">
        <div class="flex items-center justify-center">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-white">E-Store</h2>
        </div>
        <nav class="mt-10">
            <a href="#" class="flex items-center px-4 py-2 text-gray-700 transform rounded-md dark:text-gray-200 hover:bg-gray-200 hover:bg-opacity-50 dark:hover:bg-gray-700 dark:hover:bg-opacity-50">
                <svg class="w-5 h-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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7M19 10v10a1 1 0 01-1 1h-3m-2-7a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
                Home
            </a>

            <a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-700 transform rounded-md dark:text-gray-200 hover:bg-gray-200 hover:bg-opacity-50 dark:hover:bg-gray-700 dark:hover:bg-opacity-50">
                 <svg class="w-5 h-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 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
                Products
            </a>

            <a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-700 transform rounded-md dark:text-gray-200 hover:bg-gray-200 hover:bg-opacity-50 dark:hover:bg-gray-700 dark:hover:bg-opacity-50">
                <svg class="w-5 h-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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
                Cart
            </a>

             <a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-700 transform rounded-md dark:text-gray-200 hover:bg-gray-200 hover:bg-opacity-50 dark:hover:bg-gray-700 dark:hover:bg-opacity-50">
                 <svg class="w-5 h-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.317c1.03-.523 2.165-.943 3.356-.943 1.224 0 2.424.42 3.451.923L15.172 21H12v-3a3 3 0 00-3-3H5s.5-2 2-3c2.104-1.992 3.413-3.97 4.613-5.648l-.765-.765z"></path></svg>
                Wishlist
            </a>

        </nav>
    </div>

    <!-- Main Content Area (can be added here) -->
    <div class="flex-1 p-10">
        <!-- Your main content goes here -->
    </div>

</div>

拟物侧边栏

一个响应式侧边栏组件，采用拟物化设计，支持使用 Tailwind CSS 的黑暗模式。

打开预览

                <div class="flex h-screen bg-gray-200 dark:bg-gray-800">
  <!-- Sidebar -->
  <div class="flex flex-col w-64 bg-white dark:bg-gray-900 rounded-lg shadow-xl m-4">
    <div class="flex items-center justify-center h-20 shadow-inner bg-gray-100 dark:bg-gray-700 rounded-t-lg">
      <svg class="h-10 w-10 text-gray-600 dark:text-gray-300" 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>
      <span class="text-2xl font-bold text-gray-700 dark:text-gray-200 ml-2">SkeuoSidebar</span>
    </div>
    <div class="flex flex-col flex-1 overflow-y-auto">
      <nav class="flex-1 px-2 py-4 bg-gray-50 dark:bg-gray-800">
        <a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md shadow-inner mb-2">
          <svg class="h-6 w-6 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7M19 10v10a1 1 0 01-1 1h-3m-2-7v7m-7-7v7"></path></svg>
          Dashboard
        </a>
        <a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md shadow-inner mb-2">
          <svg class="h-6 w-6 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="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-8m8 0h-5m0 0v5m0-5h3"></path></svg>
          Projects
        </a>
        <a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md shadow-inner mb-2">
          <svg class="h-6 w-6 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 4.354a4 4 0 110 5.292M12 20.707v-6.98m0 0a7 7 0 00-7-7h-2a7 7 0 007 7m2 0h2a7 7 0 017-7h2a7 7 0 01-7 7m0 0v6.98m0 0a7 7 0 01-7 7h-2a7 7 0 017-7m2 0h2a7 7 0 007 7h2a7 7 0 00-7-7"></path></svg>
          Settings
        </a>
      </nav>
    </div>
    <div class="flex items-center justify-center h-20 shadow-inner bg-gray-100 dark:bg-gray-700 rounded-b-lg mt-auto ">
      <img class="h-10 w-10 rounded-full border-2 border-gray-300 shadow-md" src="https://randomuser.me/api/portraits/men/80.jpg" alt="Avatar">
      <span class="text-gray-700 dark:text-gray-200 ml-2">John Doe</span>
    </div>
  </div>
  <!-- Page Content (Placeholder) -->
  <div class="flex-1 p-10 text-2xl font-bold text-gray-600 dark:text-gray-300">
    Main Content Goes Here
  </div>
</div>

侧边栏组件

一个使用Tailwind CSS的响应式侧边栏组件，遵循材料设计原则并支持黑暗主题。包含带有徽标和标题的标题，以及带有链接的导航菜单。

打开预览

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Sidebar -->
  <div class="sidebar w-64 bg-white dark:bg-gray-800 shadow-md">
    <div class="sidebar-header flex items-center justify-center h-16 border-b dark:border-gray-700">
      <img src="https://picsum.photos/40" alt="Logo" class="w-10 h-10 rounded-full">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white ml-3">My App</h2>
    </div>
    <div class="sidebar-nav mt-4">
      <ul>
        <li>
          <a href="#" class="flex items-center py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">
            <svg class="w-5 h-5 mr-3" 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 10h16M4 14h16M4 18h16"></path></svg>
            Dashboard
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">
            <svg class="w-5 h-5 mr-3" 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 4v16m8-8H4"></path></svg>
            Settings
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">
            <svg class="w-5 h-5 mr-3" 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>
            Profile
          </a>
        </li>
      </ul>
    </div>
  </div>
  <!-- Page Content (Placeholder) -->
  <div class="flex-1 p-6">
    <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Main Content Area</h1>
    <p class="mt-4 text-gray-700 dark:text-gray-300">This is where your main page content goes.</p>
  </div>
</div>

侧边栏组件

一个响应式侧边栏组件，采用拟物化风格设计，使用Tailwind CSS。它呈现柔和的用户界面外观，带有细腻的阴影，支持暗模式，并包含占位符图像和头像。

打开预览

                <div class="flex bg-gray-200 dark:bg-gray-800 h-screen">
    <div class="w-64 h-full shadow-lg rounded-xl bg-gray-300 dark:bg-gray-700 p-4">
        <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow-sm"/>
            <h2 class="ml-3 text-xl font-semibold text-gray-800 dark:text-gray-100">User Name</h2>
        </div>
        <nav>
            <ul>
                <li class="my-2">
                    <a href="#" class="block p-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 shadow-lg transition-all duration-200">Dashboard</a>
                </li>
                <li class="my-2">
                    <a href="#" class="block p-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 shadow-lg transition-all duration-200">Profile</a>
                </li>
                <li class="my-2">
                    <a href="#" class="block p-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 shadow-lg transition-all duration-200">Settings</a>
                </li>
                <li class="my-2">
                    <a href="#" class="block p-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 shadow-lg transition-all duration-200">Logout</a>
                </li>
            </ul>
        </nav>
    </div>
    <div class="flex-1 p-10 bg-gray-100 dark:bg-gray-900">
        <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Main Content</h1>
        <img src="https://picsum.photos/500/300" alt="Placeholder" class="mt-4 rounded-lg shadow-md"/>
    </div>
</div>

拟物侧边栏

一个神经形风格的侧边栏组件，具有响应式设计和暗主题支持，使用Tailwind CSS。

打开预览

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

  <!-- Sidebar -->
  <div class="flex flex-col w-64 bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-neumorphism dark:shadow-neumorphism-dark m-4">
    <div class="flex items-center justify-center h-16 mt-8">
      <div class="h-12 w-12 rounded-full bg-gray-300 dark:bg-gray-700 shadow-neumorphism-inset dark:shadow-neumorphism-dark-inset flex items-center justify-center">
        <svg class="h-6 w-6 text-gray-600 dark:text-gray-300" 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 18h7"></path></svg>
      </div>
    </div>
    <div class="mt-8">
      <nav>
        <a href="#" class="flex items-center px-6 py-3 text-gray-700 dark:text-gray-200 block hover:bg-gray-300 dark:hover:bg-gray-700 rounded-xl mx-4 shadow-neumorphism dark:shadow-neumorphism-dark mb-4">
          <svg class="h-6 w-6 mr-3" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7M19 10v10a1 1 0 01-1 1h-3m-2-7h-4m0 0l-4-4m4 4l4 4"></path></svg>
          Home
        </a>
        <a href="#" class="flex items-center px-6 py-3 text-gray-700 dark:text-gray-200 block hover:bg-gray-300 dark:hover:bg-gray-700 rounded-xl mx-4 shadow-neumorphism dark:shadow-neumorphism-dark mb-4">
          <svg class="h-6 w-6 mr-3" 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="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path></svg>
          Services
        </a>
        <a href="#" class="flex items-center px-6 py-3 text-gray-700 dark:text-gray-200 block hover:bg-gray-300 dark:hover:bg-gray-700 rounded-xl mx-4 shadow-neumorphism dark:shadow-neumorphism-dark mb-4">
          <svg class="h-6 w-6 mr-3" 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>
          About
        </a>
        <a href="#" class="flex items-center px-6 py-3 text-gray-700 dark:text-gray-200 block hover:bg-gray-300 dark:hover:bg-gray-700 rounded-xl mx-4 shadow-neumorphism dark:shadow-neumorphism-dark mb-4">
          <svg class="h-6 w-6 mr-3" 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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8m-18 4v4a2 2 0 002 2h14a2 2 0 002-2v-4"></path></svg>
          Contact
        </a>
      </nav>
    </div>
    <div class="mt-auto mb-8">
      <div class="flex items-center justify-center">
        <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-700 shadow-neumorphism-inset dark:shadow-neumorphism-dark-inset mr-3">
        <div class="text-gray-700 dark:text-gray-200">
          John Doe
        </div>
      </div>
    </div>
  </div>

  <!-- Content area (can be added here) -->
  <div class="flex-1 p-8">
    <!-- Your content goes here -->
  </div>

</div>

<style>
  .shadow-neumorphism {
    box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
  }
  .dark .shadow-neumorphism-dark {
    box-shadow: 7px 7px 15px #414141, -7px -7px 15px #b9b9b9;
  }
  .shadow-neumorphism-inset {
    box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
  }
  .dark .shadow-neumorphism-dark-inset {
    box-shadow: inset 5px 5px 10px #414141, inset -5px -5px 10px #b9b9b9;
  }
</style>

带深色模式的玻璃质感侧边栏

一个响应式侧边栏组件，采用玻璃形态设计和深色模式支持，使用 Tailwind CSS。它包括一个logo、站点名称、导航链接和用户个人资料部分。

打开预览

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Glassmorphism Sidebar -->
  <div class="flex flex-col w-64 bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg dark:backdrop-blur-lg shadow-xl dark:shadow-2xl">
    <div class="flex items-center justify-center h-16">
      <!-- Logo and Site Name -->
      <img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full mr-2">
      <span class="text-gray-800 dark:text-white text-lg font-semibold">AppName</span>
    </div>
    <div class="flex flex-col flex-1 overflow-y-auto">
      <nav class="flex-1 px-2 py-4">
        <!-- Navigation Links -->
        <a href="#" class="flex items-center px-4 py-2 text-gray-600 dark:text-gray-200 hover:bg-white hover:bg-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 rounded-md">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" 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 7m-2 2v5a1 1 0 01-1 1H9m2-13V9a1 1 0 011-1h2a1 1 0 011 1v3m-7 7h7"></path>
          </svg>
          Dashboard
        </a>
        <a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-600 dark:text-gray-200 hover:bg-white hover:bg-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 rounded-md">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M12 20.646A17.938 17.938 0 015 10H4c0 2.761 3.582 5 8 5s8-2.239 8-5h-1c-7.033 0-10.95.51-11.297 1.702l-.155.595A1.99 1.99 0 015 15l-.155.595A1.99 1.99 0 008 19.646z"></path>
          </svg>
          Users
        </a>
        <a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-600 dark:text-gray-200 hover:bg-white hover:bg-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 rounded-md">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2m14 0V9a2 2 0 00-2-2H7a2 2 0 00-2 2v2m7 7v-4"></path>
          </svg>
          Products
        </a>
        <a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-600 dark:text-gray-200 hover:bg-white hover:bg-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 rounded-md">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c1.03-.523 2.175-.956 3.402-.956C15.463 3.361 17.5 5.252 17.5 7.5c0 2.249-2.037 4.138-4.275 4.138C11.215 11.638 10 10.457 10 8.952c0-1.486 1.184-2.652 2.618-2.652a4.06 4.06 0 013.162 1.4zM2.875 18.25h-.32C1.918 18.25 2 18.11 2 17.75c0-1.376 2.13-2.875 4.95-2.875 1.678 0 3.074.406 3.99-.94.791-1.223 2.093-1.844 3.455-1.844A5.42 5.42 0 0120.5 15.25c0 2.892-4.243 5.25-9.25 5.25-3.095 0-5.732-.919-7.166-2.42l-.224-.224z"></path>
          </svg>
          Settings
        </a>
      </nav>
    </div>
    <!-- User Profile Section -->
    <div class="flex items-center p-4 border-t border-gray-300 dark:border-gray-700">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full h-10 w-10 mr-3">
      <div class="flex flex-col">
        <span class="text-gray-800 dark:text-white text-sm font-semibold">John Doe</span>
        <span class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</span>
      </div>
    </div>
  </div>
  <!-- Main Content (optional - for demonstration) -->
  <div class="flex flex-col flex-1 p-4 overflow-y-auto">
    <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Main Content Area</h1>
    <p class="mt-4 text-gray-700 dark:text-gray-300">This is the main content area. The sidebar is positioned to the left.</p>
  </div>
</div>

侧边栏组件

一个使用拟物风格设计的侧边栏组件，在数字格式中提供真实的感觉。它支持响应式设计和暗主题。

打开预览

                <div class="flex flex-col h-screen bg-white dark:bg-gray-800 shadow-lg rounded-lg w-64">
    <div class="flex items-center justify-center h-16 bg-gray-200 dark:bg-gray-700 rounded-t-lg">
        <h1 class="text-xl font-bold text-gray-800 dark:text-white">Sidebar</h1>
    </div>
    <div class="flex-grow overflow-y-auto p-4">
        <ul class="space-y-2">
            <li>
                <a href="#" class="flex items-center p-3 text-gray-600 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3" />
                    <span>Profile</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-3 text-gray-600 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                    <img src="https://picsum.photos/40/40?random=1" alt="Placeholder" class="w-10 h-10 rounded mr-3" />
                    <span>Dashboard</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-3 text-gray-600 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                    <img src="https://picsum.photos/40/40?random=2" alt="Placeholder" class="w-10 h-10 rounded mr-3" />
                    <span>Settings</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-3 text-gray-600 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                    <img src="https://picsum.photos/40/40?random=3" alt="Placeholder" class="w-10 h-10 rounded mr-3" />
                    <span>Messages</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-3 text-gray-600 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                    <img src="https://picsum.photos/40/40?random=4" alt="Placeholder" class="w-10 h-10 rounded mr-3" />
                    <span>Logout</span>
                </a>
            </li>
        </ul>
    </div>
</div>

侧边栏组件

一个使用Tailwind CSS设计的响应式黑暗模式侧边栏组件，具有深色背景、悬停效果和用于图片和头像的占位符。

打开预览

                <div class="flex flex-col h-screen bg-gray-800 text-white p-4">
    <div class="flex items-center mb-6">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
        <h1 class="text-xl font-semibold">User Name</h1>
    </div>
    <nav class="flex-1">
        <ul>
            <li class="mb-4">
                <a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition duration-300">
                    <img src="https://picsum.photos/50/50" alt="Home Icon" class="w-6 h-6 mr-2">Home
                </a>
            </li>
            <li class="mb-4">
                <a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition duration-300">
                    <img src="https://picsum.photos/50/50" alt="Profile Icon" class="w-6 h-6 mr-2">Profile
                </a>
            </li>
            <li class="mb-4">
                <a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition duration-300">
                    <img src="https://picsum.photos/50/50" alt="Settings Icon" class="w-6 h-6 mr-2">Settings
                </a>
            </li>
            <li class="mb-4">
                <a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition duration-300">
                    <img src="https://picsum.photos/50/50" alt="Logout Icon" class="w-6 h-6 mr-2">Logout
                </a>
            </li>
        </ul>
    </nav>
    <footer>
        <p class="text-gray-400 text-sm">© 2023 Your Company</p>
    </footer>
</div>