FiltrosComponenteNemorfismo
Un componente de filtros responsivos simple con estilo de interfaz de usuario suave Neumorphism, que utiliza un esquema de color en escala de grises, diseñado para sitios web comerciales / corporativos. El componente es compatible con el modo oscuro y está construido con Tailwind CSS sin ningún JavaScript.
Código HTML
<!-- Filters Component - Neumorphism Style, Grayscale, Responsive, Dark Mode -->
<section
aria-label="Filter section"
class="bg-gray-100 dark:bg-gray-800 p-6 rounded-xl flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0 shadow-[8px_8px_16px_rgba(163,163,163,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(0,0,0,0.2)]"
>
<!-- Search Input -->
<div class="flex-1">
<label for="filter-search" class="sr-only">Search</label>
<input
type="text"
id="filter-search"
placeholder="Search..."
class="w-full px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 shadow-[8px_8px_16px_rgba(163,163,163,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(0,0,0,0.2)] transition"
/>
</div>
<!-- Category Select -->
<div class="flex-1">
<label for="filter-category" class="sr-only">Category</label>
<select
id="filter-category"
class="w-full px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 shadow-[8px_8px_16px_rgba(163,163,163,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(0,0,0,0.2)] transition"
>
<option>All Categories</option>
<option>Marketing</option>
<option>Finance</option>
<option>HR</option>
</select>
</div>
<!-- Status Select -->
<div class="flex-1">
<label for="filter-status" class="sr-only">Status</label>
<select
id="filter-status"
class="w-full px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 shadow-[8px_8px_16px_rgba(163,163,163,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(0,0,0,0.2)] transition"
>
<option>All Status</option>
<option>Active</option>
<option>Inactive</option>
</select>
</div>
<!-- Apply Button -->
<div>
<button
type="button"
class="px-6 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 shadow-[8px_8px_16px_rgba(163,163,163,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(0,0,0,0.2)] transition"
>
Apply Filters
</button>
</div>
</section>
Componentes relacionados
Componente de filtros
Un componente de filtros complejo y receptivo con elementos de diseño 3D y un esquema de color triádico, adecuado para sitios web de blogs/contenido. Admite tema oscuro.
FiltersComponent
Un componente de filtros receptivo diseñado en estilo Material Design para aplicaciones de comercio electrónico con soporte para temas oscuros. Incluye múltiples elementos interactivos para una experiencia de compra mejorada.
Componente de filtros de glassmorphism
Componente de filtros de glassmorphism para redes sociales con diseño responsivo y soporte de temas oscuros.