Filters Component
A filters component designed with a skeuomorphic style mimicking real-world controls, utilizing a grayscale color scheme, perfect for dashboards with complex interactive elements.
HTML Code
<div class="p-5 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Filters</h2>
<div class="flex flex-col space-y-4">
<div class="flex items-center">
<label for="search" class="text-gray-600 dark:text-gray-300 w-1/3">Search:</label>
<input id="search" type="text" class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-400 dark:border-gray-600 rounded-lg p-2 w-2/3 shadow-md focus:outline-none focus:ring focus:ring-gray-500" placeholder="Search..." />
</div>
<div class="flex items-center">
<label for="date" class="text-gray-600 dark:text-gray-300 w-1/3">Date:</label>
<input id="date" type="date" class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-400 dark:border-gray-600 rounded-lg p-2 w-2/3 shadow-md focus:outline-none focus:ring focus:ring-gray-500" />
</div>
<div class="flex items-center">
<label for="category" class="text-gray-600 dark:text-gray-300 w-1/3">Category:</label>
<select id="category" class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-400 dark:border-gray-600 rounded-lg p-2 w-2/3 shadow-md focus:outline-none focus:ring 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 class="text-gray-600 dark:text-gray-300 w-1/3">Status:</label>
<div class="flex items-center space-x-4 w-2/3">
<label class="flex items-center">
<input type="checkbox" class="form-checkbox h-4 w-4 text-gray-600 dark:text-gray-300">
<span class="ml-2 text-gray-800 dark:text-gray-200">Active</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="form-checkbox h-4 w-4 text-gray-600 dark:text-gray-300">
<span class="ml-2 text-gray-800 dark:text-gray-200">Inactive</span>
</label>
</div>
</div>
<button class="bg-gray-600 dark:bg-gray-400 text-white rounded-lg p-2 hover:bg-gray-700 dark:hover:bg-gray-500 transition duration-200">Apply Filters</button>
</div>
</div>Related Components
FiltersComponent
A responsive Filters Component designed in Material Design style for E-commerce applications with a dark theme support. It includes multiple interactive elements for an enhanced shopping experience.
Memphis_Job_Filters
A responsive job filter component with a playful Memphis design style, triadic color scheme, and dark mode support, suitable for job boards and career platforms.
Filters Component
A complex, responsive filters component with a 'Forest/Green palette' and 'Gradient/Color Transitions' design style, suitable for a portfolio. Includes dark mode support and interactive elements.