Composant Filtres de forum
Un composant de filtres de forum réactif avec une esthétique de conception 3D, une palette de couleurs d’automne et une prise en charge du mode sombre, adapté aux plateformes communautaires.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-orange-100 to-amber-200 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">
<!-- Component Container with 3D Card Effect -->
<div class="max-w-4xl mx-auto bg-white dark:bg-gray-700 rounded-3xl shadow-xl border-t border-r border-orange-200 dark:border-gray-600
transform perspective-1000 rotate-x-3 rotate-y-2 translate-z-10
transition-all duration-500 hover:rotate-x-0 hover:rotate-y-0 hover:translate-z-0
p-6 sm:p-8 lg:p-10 relative overflow-hidden">
<!-- Background Grain/Texture Overlay -->
<div class="absolute inset-0 z-0 opacity-10 dark:opacity-5 bg-[url('https://www.transparenttextures.com/patterns/lined-paper.png')] dark:bg-[url('https://www.transparenttextures.com/patterns/stardust.png')] pointer-events-none"></div>
<div class="relative z-10">
<h2 class="text-3xl sm:text-4xl font-extrabold text-brown-800 dark:text-orange-300 mb-6 sm:mb-8 text-center
drop-shadow-lg [text-shadow:_2px_2px_4px_rgb(0_0_0_/_0.2)] dark:[text-shadow:_2px_2px_4px_rgb(255_165_0_/_0.2)]">
Forum Discussions
</h2>
<!-- Search Bar -->
<div class="mb-6 sm:mb-8 relative">
<input type="text" placeholder="Search discussions..." class="w-full p-3 sm:p-4 pr-12 rounded-xl bg-orange-50 dark:bg-gray-600 border border-orange-200 dark:border-gray-500 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400
focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-500 focus:border-transparent
shadow-inner transition-all duration-300 transform translate-z-5 hover:scale-100.5">
<svg class="absolute right-4 top-1/2 -translate-y-1/2 w-6 h-6 text-orange-500 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</div>
<!-- Filter Section -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8">
<!-- Category Filter -->
<div class="bg-orange-100 dark:bg-gray-600 p-4 rounded-xl shadow-md border border-orange-200 dark:border-gray-500
transform translate-z-8 transition-all duration-300 hover:shadow-lg hover:transform hover:translate-z-10">
<label for="category" class="block text-lg font-semibold text-brown-700 dark:text-orange-200 mb-2
[text-shadow:_1px_1px_2px_rgb(0_0_0_/_0.1)]">Category</label>
<select id="category" class="w-full p-3 rounded-lg bg-white dark:bg-gray-700 border border-orange-200 dark:border-gray-500 text-gray-800 dark:text-gray-100
focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-orange-600 focus:border-transparent
shadow-sm appearance-none transition-all duration-200 transform translate-z-2">
<option value="all">All Categories</option>
<option value="general">General Discussion</option>
<option value="announcements">Announcements</option>
<option value="support">Support</option>
<option value="feedback">Feedback</option>
<option value="suggestions">Suggestions</option>
</select>
</div>
<!-- Sort By Filter -->
<div class="bg-orange-100 dark:bg-gray-600 p-4 rounded-xl shadow-md border border-orange-200 dark:border-gray-500
transform translate-z-8 transition-all duration-300 hover:shadow-lg hover:transform hover:translate-z-10">
<label for="sort-by" class="block text-lg font-semibold text-brown-700 dark:text-orange-200 mb-2
[text-shadow:_1px_1px_2px_rgb(0_0_0_/_0.1)]">Sort By</label>
<select id="sort-by" class="w-full p-3 rounded-lg bg-white dark:bg-gray-700 border border-orange-200 dark:border-gray-500 text-gray-800 dark:text-gray-100
focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-orange-600 focus:border-transparent
shadow-sm appearance-none transition-all duration-200 transform translate-z-2">
<option value="latest">Latest Activity</option>
<option value="popular">Most Popular</option>
<option value="newest">Newest Posts</option>
<option value="oldest">Oldest Posts</option>
</select>
</div>
<!-- Status Filter -->
<div class="bg-orange-100 dark:bg-gray-600 p-4 rounded-xl shadow-md border border-orange-200 dark:border-gray-500
transform translate-z-8 transition-all duration-300 hover:shadow-lg hover:transform hover:translate-z-10">
<label for="status" class="block text-lg font-semibold text-brown-700 dark:text-orange-200 mb-2
[text-shadow:_1px_1px_2px_rgb(0_0_0_/_0.1)]">Status</label>
<select id="status" class="w-full p-3 rounded-lg bg-white dark:bg-gray-700 border border-orange-200 dark:border-gray-500 text-gray-800 dark:text-gray-100
focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-orange-600 focus:border-transparent
shadow-sm appearance-none transition-all duration-200 transform translate-z-2">
<option value="all">All Statuses</option>
<option value="open">Open</option>
<option value="resolved">Resolved</option>
<option value="locked">Locked</option>
</select>
</div>
<!-- Tags Filter (Multi-select style) -->
<div class="bg-orange-100 dark:bg-gray-600 p-4 rounded-xl shadow-md border border-orange-200 dark:border-gray-500
transform translate-z-8 transition-all duration-300 hover:shadow-lg hover:transform hover:translate-z-10">
<label class="block text-lg font-semibold text-brown-700 dark:text-orange-200 mb-2
[text-shadow:_1px_1px_2px_rgb(0_0_0_/_0.1)]">Tags</label>
<div class="flex flex-wrap gap-2">
<button class="px-4 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-brown-900 dark:text-orange-100 text-sm font-medium
hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200
shadow-sm hover:shadow-md transform translate-z-3 hover:translate-z-4">CSS</button>
<button class="px-4 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-brown-900 dark:text-orange-100 text-sm font-medium
hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200
shadow-sm hover:shadow-md transform translate-z-3 hover:translate-z-4">HTML</button>
<button class="px-4 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-brown-900 dark:text-orange-100 text-sm font-medium
hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200
shadow-sm hover:shadow-md transform translate-z-3 hover:translate-z-4">JavaScript</button>
<button class="px-4 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-brown-900 dark:text-orange-100 text-sm font-medium
hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200
shadow-sm hover:shadow-md transform translate-z-3 hover:translate-z-4">Tailwind</button>
<button class="px-4 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-brown-900 dark:text-orange-100 text-sm font-medium
hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200
shadow-sm hover:shadow-md transform translate-z-3 hover:translate-z-4">UI/UX</button>
</div>
</div>
</div>
<!-- Action Buttons -->
<div class="mt-8 flex justify-end gap-4">
<button class="px-6 py-3 rounded-full bg-gradient-to-r from-red-600 to-red-800 dark:from-red-700 dark:to-red-900 text-white font-semibold shadow-lg
transform translate-z-10 hover:translate-z-12 hover:scale-105 transition-all duration-300
focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-600">
<span class="relative z-10">Reset Filters</span>
<span class="absolute inset-0 rounded-full opacity-0 hover:opacity-100 bg-red-700 dark:bg-red-800 transition-opacity duration-300"></span>
</button>
<button class="px-6 py-3 rounded-full bg-gradient-to-r from-orange-500 to-orange-700 dark:from-orange-600 dark:to-orange-800 text-white font-semibold shadow-lg
transform translate-z-10 hover:translate-z-12 hover:scale-105 transition-all duration-300
focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-600">
<span class="relative z-10">Apply Filters</span>
<span class="absolute inset-0 rounded-full opacity-0 hover:opacity-100 bg-orange-600 dark:bg-orange-700 transition-opacity duration-300"></span>
</button>
</div>
</div>
</div>
<!-- Custom Styles for 3D Perspective -->
<style>
.perspective-1000 {
perspective: 1000px;
}
.rotate-x-3 {
transform: rotateX(3deg);
}
.rotate-y-2 {
transform: rotateY(2deg);
}
.translate-z-10 {
transform: translateZ(10px);
}
.translate-z-8 {
transform: translateZ(8px);
}
.translate-z-5 {
transform: translateZ(5px);
}
.translate-z-4 {
transform: translateZ(4px);
}
.translate-z-3 {
transform: translateZ(3px);
}
.translate-z-2 {
transform: translateZ(2px);
}
.translate-z-12 {
transform: translateZ(12px);
}
/* Ensure children maintain 3D context */
.perspective-1000 > * {
transform-style: preserve-3d;
}
.shadow-lg[class*="transform"]:hover, .shadow-md[class*="transform"]:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c; /* Ensure dark mode body background is set */
}
}
</style>
</div>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.
Composant Filtres
Un composant de filtres réactif conçu pour l’interface utilisateur en mode sombre à l’aide de Tailwind CSS. Il comprend des options pour filtrer le contenu, utilise des arrière-plans sombres et économise la batterie.
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.