组件 过滤 器 过滤器组件

过滤器组件

一个复杂且响应式的过滤器组件,具有3D设计元素和三元色彩方案,适用于博客/内容网站。支持暗黑主题。

预览

HTML 代码

<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 组件

一个 filters 组件,采用拟物化样式设计,模拟真实世界的控件,采用灰度配色方案,非常适合具有复杂交互元素的仪表板。

打开

Bauhaus_EarthTone_Agriculture_Filters_Component

一个复杂的响应式过滤器组件,适用于农业/农业网站,采用包豪斯风格和大地色调设计。包括各种过滤选项,如类别、价格范围、评级和热门标签,并完全支持深色模式。

打开

过滤器组件

一个极简主义的过滤器组件,采用响应式设计,使用 Tailwind CSS,支持暗黑主题。

打开