组件 过滤 器 过滤器组件

过滤器组件

一个采用拟物风格的滤镜组件,专为具有灰度色彩方案和响应式设计的仪表板设计,并支持黑暗主题。

预览

HTML 代码

<div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-md">
    <h2 class="text-gray-900 dark:text-gray-100 text-lg font-bold mb-4">Filters</h2>
    <form class="flex flex-col space-y-4">
        <div class="flex items-center">
            <label for="search" class="text-gray-700 dark:text-gray-300 mr-2">Search:</label>
            <input type="text" id="search" class="flex-1 p-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-500" placeholder="Search..." />
        </div>
        <div class="flex items-center">
            <label for="category" class="text-gray-700 dark:text-gray-300 mr-2">Category:</label>
            <select id="category" class="flex-1 p-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-500">
                <option>All</option>
                <option>Category 1</option>
                <option>Category 2</option>
                <option>Category 3</option>
            </select>
        </div>
        <div class="flex items-center">
            <label for="date" class="text-gray-700 dark:text-gray-300 mr-2">Date:</label>
            <input type="date" id="date" class="flex-1 p-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-500" />
        </div>
        <button type="submit" class="bg-gray-800 dark:bg-gray-100 text-white dark:text-gray-800 rounded-lg py-2 hover:bg-gray-700 dark:hover:bg-gray-200 focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-500 transition">Apply Filters</button>
    </form>
</div>

相关组件

Filters 组件

一个复古/复古主题的社交媒体滤镜组件,具有大地色调、简单的布局、响应式设计和深色模式支持。

打开

筛选器组件

一个简单的过滤器组件,专为博客或内容消费网站设计,遵循具有单色配色方案的深色模式 UI。它具有元素最少的响应式布局。

打开

玻璃态滤镜组件

Glassmorphism Filters Social Media 组件,具有响应式设计和深色主题支持。

打开