一个复杂且响应式的过滤器组件,具有3D设计元素和三元色彩方案,适用于博客/内容网站。支持暗黑主题。
<div class="container mx-auto p-4 dark:bg-gray-900"> <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white">Filter Content</h2> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> </div> <div class="bg-white dark:bg-gray-800 rounded-lg shadow-2xl p-6 transform transition duration-500 hover:scale-105"> <h3 class="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-200">Categories</h3> <div class="space-y-3"> <label class="flex items-center text-gray-600 dark:text-gray-300"> <input type="checkbox" class="form-checkbox mr-2 text-blue-500 dark:text-blue-400"> Technology </label> <label class="flex items-center text-gray-600 dark:text-gray-300"> <input type="checkbox" class="form-checkbox mr-2 text-red-500 dark:text-red-400"> Travel </label> <label class="flex items-center text-gray-600 dark:text-gray-300"> <input type="checkbox" class="form-checkbox mr-2 text-green-500 dark:text-green-400"> Food </label> <label class="flex items-center text-gray-600 dark:text-gray-300"> <input type="checkbox" class="form-checkbox mr-2 text-yellow-500 dark:text-yellow-400"> Lifestyle </label> </div> </div> <div class="bg-white dark:bg-gray-800 rounded-lg shadow-2xl p-6 transform transition duration-500 hover:scale-105"> <h3 class="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-200">Tags</h3> <div class="flex flex-wrap gap-2"> <span class="px-3 py-1 bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-200 rounded-full text-sm">AI</span> <span class="px-3 py-1 bg-red-200 dark:bg-red-700 text-red-800 dark:text-red-200 rounded-full text-sm">Adventure</span> <span class="px-3 py-1 bg-green-200 dark:bg-green-700 text-green-800 dark:text-green-200 rounded-full text-sm">Recipes</span> <span class="px-3 py-1 bg-yellow-200 dark:bg-yellow-700 text-yellow-800 dark:text-yellow-200 rounded-full text-sm">Minimalism</span> </div> </div> <div class="bg-white dark:bg-gray-800 rounded-lg shadow-2xl p-6 transform transition duration-500 hover:scale-105"> <h3 class="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-200">Date Range</h3> <div class="space-y-4"> <div> <label for="start-date" class="block text-gray-600 dark:text-gray-300 mb-2">Start Date</label> <input type="date" id="start-date" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-white"> </div> <div> <label for="end-date" class="block text-gray-600 dark:text-gray-300 mb-2">End Date</label> <input type="date" id="end-date" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-white"> </div> </div> </div> </div> <div class="mt-8 text-center"> <button class="px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-full shadow-lg transform transition duration-300 hover:scale-110">Apply Filters</button> </div> </div>
一个 filters 组件,采用拟物化样式设计,模拟真实世界的控件,采用灰度配色方案,非常适合具有复杂交互元素的仪表板。
一个复杂的响应式过滤器组件,适用于农业/农业网站,采用包豪斯风格和大地色调设计。包括各种过滤选项,如类别、价格范围、评级和热门标签,并完全支持深色模式。
一个极简主义的过滤器组件,采用响应式设计,使用 Tailwind CSS,支持暗黑主题。