Componente de filtros
Un componente de filtro de redes sociales de temática retro/vintage con tonos tierra, diseño simple, diseño responsivo y compatibilidad con el modo oscuro.
Código HTML
<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>Componentes relacionados
Bauhaus_EarthTone_Agriculture_Filters_Component
Un componente de filtro complejo y responsivo para sitios web de agricultura/ganadería, diseñado en un estilo Bauhaus con tonos tierra. Incluye varias opciones de filtrado como categorías, rango de precios, calificaciones y etiquetas populares, con soporte completo para el modo oscuro.
Componente de filtros
Un componente de filtros complejo y responsivo con un estilo de diseño de 'Paleta Bosque/Verde' y 'Transiciones de Degradado/Color', adecuado para un portafolio. Incluye soporte para modo oscuro y elementos interactivos.
Glassmorphism_EarthTones_SocialMedia_Filters
Un componente de filtros de redes sociales complejo y receptivo con un diseño de morfismo de vidrio, combinación de colores en tonos tierra y compatibilidad total con el modo oscuro. Cuenta con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque, HTML semántico y opciones de filtro interactivo.