FiltresComposantNeumorphisme
Un composant de filtres réactifs simple stylisé avec l’interface utilisateur logicielle Neumorphism, utilisant un schéma de couleurs en niveaux de gris, conçu pour les sites Web d’entreprise. Le composant prend en charge le mode sombre et est construit avec Tailwind CSS sans aucun JavaScript.
HTML Code
<!-- 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>
Composants associés
Composant Filtres
Un composant de filtres réactif conçu avec un style glassmorphism, avec des couleurs pastel et une prise en charge du mode sombre, destiné aux sites Web d’entreprise.
Composant Filtres
Un composant de filtres réactifs conçu avec des micro-interactions et optimisé pour la prise en charge des thèmes sombres.
Composant Filtres
Il s’agit d’un composant de filtres complexe et réactif avec un style de conception « Palette forêt/vert » et « Transitions dégradées/couleurs », adapté à un portefeuille. Comprend la prise en charge du mode sombre et des éléments interactifs.