Filtres d’événements neumorphes
Un composant de filtre neumorphe simple et réactif utilisant des tons chauds de coucher de soleil pour les sites Web d’événements et de conférences, avec prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-orange-100 to-yellow-100 dark:from-gray-800 dark:to-gray-900 min-h-screen flex items-center justify-center font-sans">
<div class="w-full max-w-sm mx-auto p-6 rounded-3xl bg-transparent
shadow-xl shadow-orange-300/50 dark:shadow-gray-950
dark:bg-gradient-to-br dark:from-gray-850 dark:to-gray-900
text-orange-900 dark:text-gray-200
">
<h2 class="text-2xl sm:text-3xl font-semibold mb-6 text-center
text-orange-800 dark:text-orange-400
[text-shadow:_0_1px_0_rgb(255_255_255_/_40%)] dark:[text-shadow:_none]
">
Filter Events
</h2>
<div class="space-y-6">
<!-- Category Filter -->
<div>
<label for="category" class="block text-sm font-medium mb-2 opacity-80 dark:opacity-90">
Category
</label>
<div class="relative">
<select id="category" class="block w-full px-4 py-2 rounded-xl appearance-none
bg-gradient-to-br from-orange-50 to-amber-50 dark:from-gray-700 dark:to-gray-800
shadow-md shadow-orange-200/50 dark:shadow-gray-950
border border-orange-100 dark:border-gray-700
focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-orange-500
neumorphic-inset
text-orange-900 dark:text-gray-100
">
<option value="">All Categories</option>
<option value="tech">Technology</option>
<option value="design">Design & UX</option>
<option value="marketing">Marketing</option>
<option value="business">Business & Entrepreneurship</option>
<option value="health">Health & Wellness</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3
text-orange-600 dark:text-gray-400
">
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</div>
</div>
</div>
<!-- Date Range Filter -->
<div>
<label for="date-start" class="block text-sm font-medium mb-2 opacity-80 dark:opacity-90">
Date Range
</label>
<div class="flex space-x-4">
<input type="date" id="date-start" class="w-full px-4 py-2 rounded-xl
bg-gradient-to-br from-orange-50 to-amber-50 dark:from-gray-700 dark:to-gray-800
shadow-md shadow-orange-200/50 dark:shadow-gray-950
border border-orange-100 dark:border-gray-700
focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-orange-500
neumorphic-inset
text-orange-900 dark:text-gray-100
placeholder-orange-400 dark:placeholder-gray-500
">
<input type="date" id="date-end" class="w-full px-4 py-2 rounded-xl
bg-gradient-to-br from-orange-50 to-amber-50 dark:from-gray-700 dark:to-gray-800
shadow-md shadow-orange-200/50 dark:shadow-gray-950
border border-orange-100 dark:border-gray-700
focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-orange-500
neumorphic-inset
text-orange-900 dark:text-gray-100
placeholder-orange-400 dark:placeholder-gray-500
">
</div>
</div>
<!-- Location Filter -->
<div>
<label for="location" class="block text-sm font-medium mb-2 opacity-80 dark:opacity-90">
Location
</label>
<input type="text" id="location" placeholder="e.g., Virtual, New York, London"
class="w-full px-4 py-2 rounded-xl
bg-gradient-to-br from-orange-50 to-amber-50 dark:from-gray-700 dark:to-gray-800
shadow-md shadow-orange-200/50 dark:shadow-gray-950
border border-orange-100 dark:border-gray-700
focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-orange-500
neumorphic-inset
text-orange-900 dark:text-gray-100
placeholder-orange-400 dark:placeholder-gray-500
">
</div>
<!-- Filter Button -->
<button type="button" class="w-full py-3 rounded-full font-semibold relative overflow-hidden
bg-gradient-to-r from-orange-500 to-red-500 text-white
shadow-lg shadow-orange-400/50 dark:shadow-red-700/50
transition-all duration-300 ease-out
hover:scale-105 hover:shadow-xl
active:scale-95 active:shadow-md
dark:from-orange-600 dark:to-red-600
group
">
<span class="relative z-10">
Apply Filters
</span>
<div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
</button>
<!-- Reset Button -->
<button type="button" class="w-full py-2 rounded-full font-medium
text-orange-700 dark:text-orange-300
bg-transparent
shadow-none
transition duration-300 ease-in-out
hover:text-orange-900 hover:dark:text-orange-100
hover:underline
focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-orange-500
neumorphic-button-flat
">
Reset Filters
</button>
</div>
</div>
</div>
<style>
/* Base Neumorphic Inset */
.neumorphic-inset {
box-shadow:
inset 4px 4px 8px rgba(255, 160, 0, 0.2), /* Light shadow for orange */
inset -4px -4px 8px rgba(255, 255, 255, 0.7); /* Dark shadow for white */
transition: all 0.2s ease-in-out;
}
.dark .neumorphic-inset {
box-shadow:
inset 4px 4px 8px rgba(0, 0, 0, 0.6),
inset -4px -4px 8px rgba(70, 70, 70, 0.3);
}
/* Focus state for neumorphic inset elements */
.neumorphic-inset:focus {
box-shadow:
inset 2px 2px 5px rgba(255, 160, 0, 0.3),
inset -2px -2px 5px rgba(255, 255, 255, 0.5),
0 0 0 2px var(--tw-ring-color); /* Tailwind ring */
}
.dark .neumorphic-inset:focus {
box-shadow:
inset 2px 2px 5px rgba(0, 0, 0, 0.7),
inset -2px -2px 5px rgba(70, 70, 70, 0.4),
0 0 0 2px var(--tw-ring-color); /* Tailwind ring */
}
/* Custom styling for select dropdown arrow */
select.neumorphic-inset {
background-image: none; /* Remove default arrow */
}
select ~ div.pointer-events-none svg {
fill: currentColor; /* Use text color for arrow */
}
.neumorphic-button-flat {
/* Reset button should look flatter, almost like text, but maintain neumorphic context */
background-color: transparent; /* No strong background */
box-shadow: none; /* No strong shadow */
}
.neumorphic-button-flat:hover {
/* Subtle glow or shift on hover if desired, or just underline */
/* Example: text-shadow: 0 0 5px rgba(255, 160, 0, 0.5); */
}
</style>Composants associés
RetroMedicalFiltersComponent
Un composant réactif de filtres de style rétro/vintage pour les applications de santé, avec des couleurs automnales et la prise en charge du mode sombre. Il comprend des options de filtre interactives pour les catégories, la plage de dates et le statut.
FiltresComposant
Un composant de filtres réactif conçu dans le style Material Design pour les applications de commerce électronique avec une prise en charge du thème sombre. Il comprend plusieurs éléments interactifs pour une expérience d’achat améliorée.
BrutalistesFiltres
Un composant de filtre simple et brutaliste pour les applications de médias sociaux, avec une palette de couleurs complémentaire et la prise en charge du mode sombre.