搜索组件

类别

组件侧边栏

侧边栏

页面侧边的内容区域

侧边栏组件

一个用于电子商务的响应式极简侧边栏组件，支持深色模式。它具有带有产品类别和购物车图标的简单布局。

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Sidebar -->
  <div class="w-64 bg-white dark:bg-gray-800 shadow-md p-4">
    <div class="text-2xl font-semibold text-gray-800 dark:text-white mb-6">Shop</div>
    <nav>
      <ul class="space-y-4">
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Categories</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">New Arrivals</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Best Sellers</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Sale</a></li>
      </ul>
    </nav>
    <div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
      <a href="#" class="flex items-center text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
        <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>
        Shopping Cart
      </a>
    </div>
  </div>

  <!-- Main content area (for context) -->
  <div class="flex-1 p-8">
    <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">Welcome to our Shop</h1>
    <p class="text-gray-700 dark:text-gray-300">Select a category from the sidebar to start shopping.</p>
  </div>
</div>

侧边栏组件

一个用于电子档案夹的响应式侧边栏组件，具有深色主题的 3D 设计风格，适合展示工作或产品，具有一些交互式元素和类似的配色方案。

打开预览

                <aside class="bg-gray-800 dark:bg-gray-900 w-64 h-screen shadow-lg transform transition-transform duration-300 relative hover:translate-x-1 hover:shadow-2xl">
    <div class="flex items-center justify-center h-16 border-b border-gray-700 dark:border-gray-600">
        <h1 class="text-white text-lg font-bold">My Portfolio</h1>
    </div>
    <nav class="flex flex-col p-4">
        <a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <span>Home</span>
        </a>
        <a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <span>About</span>
        </a>
        <a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <span>Projects</span>
        </a>
        <a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <span>Contact</span>
        </a>
    </nav>
    <footer class="absolute bottom-0 left-0 w-full border-t border-gray-700 dark:border-gray-600 p-4">
        <p class="text-gray-500 text-sm text-center">© 2023 My Portfolio</p>
    </footer>
</aside>

侧边栏组件

一个响应式侧边栏组件，用于展示具有引人入胜的微交互和互补配色方案的项目组合项，支持深色模式。

打开预览

                <aside class="w-64 h-full bg-white dark:bg-gray-800 shadow-lg transition-transform duration-300 ease-in-out transform hover:scale-105">  
    <div class="p-4">    
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Portfolio</h2>    
        <div class="mt-4">            
            <a href="#" class="block py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Home</a>            
            <a href="#" class="block py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Projects</a>            
            <a href="#" class="block py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">About Me</a>            
            <a href="#" class="block py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Contact</a>        
        </div>  
    </div>  
    <div class="flex flex-col items-center px-4 py-4">    
        <img src="https://picsum.photos/80/80" alt="Portfolio Avatar" class="rounded-full border-2 border-blue-500 dark:border-blue-400 mb-2" />    
        <h3 class="text-lg font-medium text-gray-800 dark:text-white">John Doe</h3>    
        <p class="text-sm text-gray-600 dark:text-gray-400">Web Developer</p>  
    </div>  
</aside>

简单生动的博客侧边栏

一个用于博客内容的简单响应式侧边栏组件，使用 Tailwind CSS 设计有鲜艳的色彩和类似 Material 的感觉。包括导航链接和用户配置文件部分。支持使用 Tailwind 的 dark：前缀的深色模式。固定在较大的屏幕上，隐藏在较小的屏幕上。

打开预览

                <!-- Sidebar Component -->
<div class="hidden lg:block w-64 bg-purple-600 text-white dark:bg-purple-800 dark:text-yellow-200 h-screen fixed top-0 left-0 p-5 space-y-6">
    <!-- Sidebar Header -->
    <div class="flex items-center space-x-3">
        <svg class="w-8 h-8 text-yellow-300 dark:text-yellow-100" 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 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9m2 10V7a2 2 0 00-2-2h-1C9 4 7 2 5 2c-2 0-3 1.5-3 3v15a1 1 0 001 1h16z"></path></svg>
        <span class="text-2xl font-semibold text-yellow-300 dark:text-yellow-100">Blog Name</span>
    </div>

    <!-- Navigation -->
    <nav class="space-y-2">
        <a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
            Home
        </a>
        <a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
            Categories
        </a>
        <a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
            Popular
        </a>
        <a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
            About
        </a>
    </nav>

    <!-- User Profile (Optional) - Position at bottom -->
    <div class="absolute bottom-5 left-5 right-5">
         <div class="flex items-center space-x-3 p-3 bg-purple-700 dark:bg-purple-900 rounded">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/thumb/women/44.jpg" alt="User Avatar">
            <div class="flex flex-col">
                <span class="font-semibold text-yellow-200 dark:text-yellow-100 text-sm">Jane Doe</span>
                <span class="text-xs text-purple-200 dark:text-purple-300">View Profile</span>
            </div>
        </div>
    </div>
</div>

侧边栏组件

一个简单的响应式侧边栏组件，具有野兽派设计、单色配色方案和深色模式支持。

打开预览

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Sidebar -->
  <div class="w-64 bg-gray-800 text-white dark:bg-gray-950 dark:text-gray-200 flex flex-col">
    <div class="p-6 text-2xl font-bold border-b border-gray-700 dark:border-gray-800">BrutalNav</div>
    <nav class="flex-grow">
      <a href="#" class="block py-2 px-6 text-gray-300 hover:bg-gray-700 hover:text-white dark:hover:bg-gray-800 dark:hover:text-gray-100 transition duration-200">Home</a>
      <a href="#" class="block py-2 px-6 text-gray-300 hover:bg-gray-700 hover:text-white dark:hover:bg-gray-800 dark:hover:text-gray-100 transition duration-200">About</a>
      <a href="#" class="block py-2 px-6 text-gray-300 hover:bg-gray-700 hover:text-white dark:hover:bg-gray-800 dark:hover:text-gray-100 transition duration-200">Services</a>
      <a href="#" class="block py-2 px-6 text-gray-300 hover:bg-gray-700 hover:text-white dark:hover:bg-gray-800 dark:hover:text-gray-100 transition duration-200">Contact</a>
    </nav>
  </div>

  <!-- Content Area (placeholder) -->
  <div class="flex-grow p-10 text-gray-800 dark:text-gray-200">
    <h1 class="text-3xl font-bold mb-6">Main Content</h1>
    <p>This is the main content area. The sidebar is on the left.</p>
  </div>
</div>

拟物侧边栏组件

一个响应式侧边栏组件，具有 Neumorphism 设计、大地色调配色方案和简单的复杂性，适用于博客或内容消费。包括深色模式支持。

打开预览

                <div class="flex h-screen bg-gray-200 dark:bg-gray-800">
  <!-- Sidebar -->
  <div class="w-64 bg-gray-300 dark:bg-gray-700 p-6 space-y-6 shadow-neumorphic-light dark:shadow-neumorphic-dark">
    <!-- Logo or Blog Title -->
    <div class="text-2xl font-bold text-gray-800 dark:text-white">My Blog</div>
    
    <!-- Navigation -->
    <nav>
      <a href="#" class="block py-2 px-4 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-400 dark:hover:bg-gray-600 hover:text-gray-800 dark:hover:text-white shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">Home</a>
      <a href="#" class="block py-2 px-4 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-400 dark:hover:bg-gray-600 hover:text-gray-800 dark:hover:text-white shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">About</a>
      <a href="#" class="block py-2 px-4 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-400 dark:hover:bg-gray-600 hover:text-gray-800 dark:hover:text-white shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">Contact</a>
    </nav>

    <!-- Categories or other links -->
    <div class="space-y-2">
      <div class="text-sm font-semibold text-gray-600 dark:text-gray-300">Categories</div>
      <a href="#" class="block py-1 text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Technology</a>
      <a href="#" class="block py-1 text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Travel</a>
      <a href="#" class="block py-1 text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Food</a>
    </div>
  </div>

  <!-- Main Content Area (optional - just for demonstration) -->
  <div class="flex-1 p-6 overflow-y-auto">
    <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">Welcome to the Blog</h1>
    <p class="text-gray-700 dark:text-gray-300">This is the main content area. The sidebar is on the left.</p>
  </div>
</div>

<!-- Add custom CSS for Neumorphism effect -- In a separate CSS file or style tag -->
<style>
.shadow-neumorphic-light {
  box-shadow: 7px 7px 15px #a7acb1, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphic-dark {
  box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #323232;
}
.shadow-neumorphic-inset-light {
  box-shadow: inset 5px 5px 10px #a7acb1, inset -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphic-inset-dark {
  box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #323232;
}
</style>

复古侧边栏组件

一个响应式侧边栏组件，采用复古/复古设计，用于展示作品或产品，利用灰度配色方案和 Tailwind CSS 类，支持深色模式。

打开预览

                <div class="flex flex-col h-screen bg-white dark:bg-gray-800">
    <div class="flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-700">
        <h1 class="text-2xl font-bold text-gray-800 dark:text-white">My Portfolio</h1>
    </div>
    <div class="flex-grow p-4">
        <div class="flex flex-col space-y-4">
            <a href="#" class="flex items-center p-2 bg-gray-300 dark:bg-gray-600 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition ease-in-out duration-200">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-700 dark:text-gray-200">Home</span>
            </a>
            <a href="#" class="flex items-center p-2 bg-gray-300 dark:bg-gray-600 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition ease-in-out duration-200">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-700 dark:text-gray-200">About</span>
            </a>
            <a href="#" class="flex items-center p-2 bg-gray-300 dark:bg-gray-600 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition ease-in-out duration-200">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-700 dark:text-gray-200">Projects</span>
            </a>
            <a href="#" class="flex items-center p-2 bg-gray-300 dark:bg-gray-600 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition ease-in-out duration-200">
                <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-700 dark:text-gray-200">Contact</span>
            </a>
        </div>
    </div>
    <div class="p-4 text-center bg-gray-200 dark:bg-gray-700">
        <p class="text-gray-600 dark:text-gray-300">© 2023 My Portfolio. All rights reserved.</p>
    </div>
</div>

侧边栏组件

一个响应式侧边栏组件，设计用于电子商务应用，具有材料设计元素和柔和色彩方案，支持深色模式。

打开预览

                <aside class="bg-white dark:bg-gray-800 h-full w-64 p-5 shadow-lg  transition-transform duration-300 transform lg:translate-x-0 lg:fixed lg:left-0 lg:top-0 lg:h-full">
    <div class="flex items-center mb-5">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <h2 class="ml-3 text-gray-800 dark:text-white font-semibold">User Name</h2>
    </div>
    <nav>
        <ul>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Home</a>
            </li>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Shop</a>
            </li>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Orders</a>
            </li>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Wishlist</a>
            </li>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Profile</a>
            </li>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Settings</a>
            </li>
            <li>
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Logout</a>
            </li>
        </ul>
    </nav>
    <div class="mt-5">
        <h3 class="text-gray-600 dark:text-gray-400 font-semibold">Featured Products</h3>
        <div class="mt-3">
            <img class="w-full h-24 object-cover rounded-lg shadow-md" src="https://picsum.photos/200/100?random=1" alt="Product 1">
            <img class="w-full h-24 object-cover rounded-lg shadow-md mt-2" src="https://picsum.photos/200/100?random=2" alt="Product 2">
        </div>
    </div>
</aside>

侧边栏组件

一个玻璃景深样式的侧边栏组件，具有互补色彩方案，针对复杂度适中的作品集网站设计。具有响应性，并使用Tailwind CSS支持暗模式。

打开预览

                <div class="flex h-screen bg-gray-200 dark:bg-gray-900">
  <!-- Sidebar -->
  <div class="w-64 bg-white dark:bg-gray-800 p-6 space-y-6 transform -translate-x-full md:translate-x-0 transition duration-200 ease-in-out">
    <!-- Glassmorphism Effect -->
    <div class="absolute inset-0 bg-blue-500 bg-opacity-20 backdrop-filter backdrop-blur-lg rounded"></div>
    
    <!-- Sidebar Content -->
    <div class="relative z-10">
      <div class="flex items-center space-x-2">
        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">John Doe</h2>
      </div>
      <nav class="mt-8">
        <a href="#" class="flex items-center space-x-2 py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white rounded-md">
          <svg class="h-5 w-5" 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 7m-2 2v5a1 1 0 01-1 1H6a1 1 0 01-1-1v-5a1 1 0 011-1h2"></path></svg>
          <span>Home</span>
        </a>
        <a href="#" class="flex items-center space-x-2 py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white rounded-md">
          <svg class="h-5 w-5" 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 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-7h.01"></path></svg>
          <span>Projects</span>
        </a>
        <a href="#" class="flex items-center space-x-2 py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white rounded-md">
          <svg class="h-5 w-5" 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 6H5a2 2 0 00-2 2v9a2 2 0 002 2h10a2 2 0 002-2V8a2 2 0 00-2-2h-5m0 0l2-2m-2 2l-2-2m7-3a2 2 0 11-4 0 2 2 0 014 0zM14 13h3m-3 3h3m-9-2h.01"></path></svg>
          <span>Blog</span>
        </a>
        <a href="#" class="flex items-center space-x-2 py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white rounded-md">
          <svg class="h-5 w-5" 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 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
          <span>Contact</span>
        </a>
      </nav>
    </div>
  </div>

  <!-- Main Content -->
  <div class="flex-1 p-10">
    <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Welcome to my Portfolio</h1>
    <!-- Add your main content here -->
  </div>
</div>

拟物化浅色侧边栏

一个简单的响应式侧边栏组件，采用拟物化设计和柔和的颜色，适合博客或内容网站。包括深色模式支持。

打开预览

                <div class="flex flex-col h-screen bg-gray-200 dark:bg-gray-800">
  <div class="flex items-center justify-center h-16 bg-gray-300 dark:bg-gray-700 shadow-md">
    <span class="text-lg font-semibold text-gray-700 dark:text-gray-200">Blog Menu</span>
  </div>
  <nav class="flex-grow p-4">
    <ul class="space-y-2">
      <li>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-400 dark:active:bg-gray-600">
          Home
        </a>
      </li>
      <li>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-400 dark:active:bg-gray-600">
          About
        </a>
      </li>
      <li>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-400 dark:active:bg-gray-600">
          Contact
        </a>
      </li>
    </ul>
  </nav>
</div>