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
Composant Filtres
Un composant de filtres minimaliste et réactif pour le commerce électronique, avec prise en charge du thème sombre. Il comprend des catégories, une gamme de prix et un filtre de couleur.
Bauhaus_EarthTone_Agriculture_Filters_Component
Un composant de filtre complexe et réactif pour les sites Web agricoles, conçu dans un style Bauhaus avec des tons de terre. Comprend diverses options de filtrage telles que les catégories, la gamme de prix, les notes et les balises populaires, avec une prise en charge complète du mode sombre.
Composant Filtres
Un composant de filtres complexe, réactif, de style Glassmorphism avec une palette de couleurs analogue pour les sites Web d’entreprise. Comprend des éléments translucides et des effets de flou, avec une prise en charge complète du mode sombre à l’aide de Tailwind CSS. Aucun JavaScript n’est inclus.