一个响应式侧边栏组件,具有 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 类,支持深色模式。
适用于电子商务的响应式玻璃拟态侧边栏,支持暗模式