Composant Filtres
Un composant de filtre de médias sociaux à thème rétro/vintage avec des tons de terre, une mise en page simple, un design réactif et une prise en charge du mode sombre.
HTML Code
<div class="container mx-auto p-4 md:p-8 font-serif">
<!-- Retro/Vintage Filters Section -->
<div class="bg-amber-100 dark:bg-amber-900 rounded-lg shadow-lg p-6 mb-8 border-4 border-amber-800 dark:border-amber-200 transform -rotate-2">
<h2 class="text-2xl md:text-3xl font-bold text-amber-800 dark:text-amber-200 mb-4 text-center uppercase tracking-wide">Vintage Filters</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
<!-- Filter 1 -->
<div class="group cursor-pointer transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/seed/vintage1/200/200" alt="Vintage Filter 1" class="w-full h-32 object-cover rounded-lg shadow-md border-2 border-amber-600 group-hover:border-amber-400">
<p class="text-center text-amber-700 dark:text-amber-300 mt-2 text-sm md:text-base font-semibold group-hover:underline">Sepia</p>
</div>
<!-- Filter 2 -->
<div class="group cursor-pointer transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/seed/vintage2/200/200" alt="Vintage Filter 2" class="w-full h-32 object-cover rounded-lg shadow-md border-2 border-amber-600 group-hover:border-amber-400">
<p class="text-center text-amber-700 dark:text-amber-300 mt-2 text-sm md:text-base font-semibold group-hover:underline">Grayscale</p>
</div>
<!-- Filter 3 -->
<div class="group cursor-pointer transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/seed/vintage3/200/200" alt="Vintage Filter 3" class="w-full h-32 object-cover rounded-lg shadow-md border-2 border-amber-600 group-hover:border-amber-400">
<p class="text-center text-amber-700 dark:text-amber-300 mt-2 text-sm md:text-base font-semibold group-hover:underline">Lomo</p>
</div>
<!-- Filter 4 -->
<div class="group cursor-pointer transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/seed/vintage4/200/200" alt="Vintage Filter 4" class="w-full h-32 object-cover rounded-lg shadow-md border-2 border-amber-600 group-hover:border-amber-400">
<p class="text-center text-amber-700 dark:text-amber-300 mt-2 text-sm md:text-base font-semibold group-hover:underline">Noir</p>
</div>
<!-- Filter 5 -->
<div class="group cursor-pointer transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/seed/vintage5/200/200" alt="Vintage Filter 5" class="w-full h-32 object-cover rounded-lg shadow-md border-2 border-amber-600 group-hover:border-amber-400">
<p class="text-center text-amber-700 dark:text-amber-300 mt-2 text-sm md:text-base font-semibold group-hover:underline">Retro</p>
</div>
</div>
</div>
<!-- Simple Adjustments Section -->
<div class="bg-lime-100 dark:bg-lime-900 rounded-lg shadow-lg p-6 border-4 border-lime-800 dark:border-lime-200 transform rotate-1">
<h2 class="text-2xl md:text-3xl font-bold text-lime-800 dark:text-lime-200 mb-4 text-center uppercase tracking-wide">Basic Adjustments</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<!-- Adjustment 1 -->
<div class="flex items-center space-x-4 bg-lime-200 dark:bg-lime-800 p-3 rounded-md shadow-sm">
<label for="brightness" class="text-lime-800 dark:text-lime-200 font-semibold text-sm md:text-base">Brightness:</label>
<input type="range" id="brightness" min="0" max="200" value="100" class="flex-grow accent-lime-600 pointer-events-none">
</div>
<!-- Adjustment 2 -->
<div class="flex items-center space-x-4 bg-lime-200 dark:bg-lime-800 p-3 rounded-md shadow-sm">
<label for="contrast" class="text-lime-800 dark:text-lime-200 font-semibold text-sm md:text-base">Contrast:</label>
<input type="range" id="contrast" min="0" max="200" value="100" class="flex-grow accent-lime-600 pointer-events-none">
</div>
</div>
</div>
</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 brutalistes avec Tailwind CSS, avec un design réactif, la prise en charge des thèmes sombres et des espaces réservés pour les images et les avatars.
Composant Filtres
Un composant de filtres réactifs conçu dans le style Brutalism avec une palette de couleurs en niveaux de gris pour un paramètre de tableau de bord. Il comprend des options de filtre interactives et prend en charge le thème sombre.