Componente de filtros
Un componente de filtros diseñado con un estilo skeuomórfico, con efectos responsivos y compatibilidad con temas oscuros. Este componente utiliza Tailwind CSS para el estilo e incluye imágenes y avatares de marcador de posición aleatorios.
Código HTML
<div class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-gray-800 dark:text-gray-200 text-2xl font-semibold mb-4">Filters</h2>
<div class="space-y-4">
<div class="flex items-center">
<input type="checkbox" id="filter1" class="w-4 h-4 text-green-500 bg-gray-200 border-gray-300 rounded focus:ring-2 focus:ring-green-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-green-600" />
<label for="filter1" class="ml-2 text-gray-800 dark:text-gray-200">Filter Option 1</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="filter2" class="w-4 h-4 text-blue-500 bg-gray-200 border-gray-300 rounded focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600" />
<label for="filter2" class="ml-2 text-gray-800 dark:text-gray-200">Filter Option 2</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="filter3" class="w-4 h-4 text-red-500 bg-gray-200 border-gray-300 rounded focus:ring-2 focus:ring-red-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-red-600" />
<label for="filter3" class="ml-2 text-gray-800 dark:text-gray-200">Filter Option 3</label>
</div>
</div>
<div class="mt-6">
<button class="w-full text-white bg-blue-500 hover:bg-blue-700 rounded-lg p-2 text-center transition duration-300 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-600">Apply Filters</button>
</div>
<div class="mt-4">
<img src="https://picsum.photos/400/200?random=1" alt="Random Image" class="rounded-lg shadow-md" />
<img src="https://picsum.photos/400/200?random=2" alt="Random Image" class="rounded-lg shadow-md mt-4" />
</div>
<div class="flex justify-between items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white shadow-lg" />
<span class="text-gray-800 dark:text-gray-200">User Name</span>
</div>
</div>Componentes relacionados
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.
Componente de filtros
Un componente de filtros receptivo diseñado con un estilo de cristal, con colores pastel y soporte para modo oscuro, dirigido a sitios web comerciales / corporativos.
Componente de filtros
Un componente de filtros diseñado con un estilo esqueuomórfico que imita los controles del mundo real, utilizando un esquema de color en escala de grises, perfecto para paneles con elementos interactivos complejos.