Componente de filtros
Un componente de filtros receptivo diseñado para la interfaz de usuario del modo oscuro con Tailwind CSS. Incluye opciones para filtrar contenido, usa fondos oscuros y ahorra batería.
Código HTML
<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-xl font-bold mb-4">Filters</h2>
<form>
<div class="mb-4">
<label for="category" class="block text-sm font-medium mb-2">Category</label>
<select id="category" class="bg-gray-700 text-white border border-gray-600 rounded-md p-2 w-full">
<option>All</option>
<option>Technology</option>
<option>Health</option>
<option>Education</option>
<option>Fashion</option>
</select>
</div>
<div class="mb-4">
<label for="price-range" class="block text-sm font-medium mb-2">Price Range</label>
<input type="range" id="price-range" min="0" max="100" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
</div>
<div class="mb-4">
<label class="block text-sm font-medium mb-2">Rating</label>
<div class="flex space-x-1">
<input type="radio" id="star5" name="rating" value="5" class="hidden">
<label for="star5" class="cursor-pointer text-yellow-500">★</label>
<input type="radio" id="star4" name="rating" value="4" class="hidden">
<label for="star4" class="cursor-pointer text-yellow-500">★</label>
<input type="radio" id="star3" name="rating" value="3" class="hidden">
<label for="star3" class="cursor-pointer text-yellow-500">★</label>
<input type="radio" id="star2" name="rating" value="2" class="hidden">
<label for="star2" class="cursor-pointer text-yellow-500">★</label>
<input type="radio" id="star1" name="rating" value="1" class="hidden">
<label for="star1" class="cursor-pointer text-yellow-500">★</label>
</div>
</div>
<button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 rounded">Apply Filters</button>
</form>
<div class="mt-6">
<h3 class="text-lg font-semibold mb-2">Featured Items</h3>
<div class="grid grid-cols-1 gap-4">
<div class="bg-gray-700 rounded-lg p-4 shadow">
<img src="https://picsum.photos/200/150?random=1" alt="Random Item" class="mb-2 rounded-md">
<h4 class="font-bold">Item Title</h4>
<p class="text-sm">Description of the item.</p>
</div>
<div class="bg-gray-700 rounded-lg p-4 shadow">
<img src="https://picsum.photos/200/150?random=2" alt="Random Item" class="mb-2 rounded-md">
<h4 class="font-bold">Item Title</h4>
<p class="text-sm">Description of the item.</p>
</div>
<div class="bg-gray-700 rounded-lg p-4 shadow">
<img src="https://picsum.photos/200/150?random=3" alt="Random Item" class="mb-2 rounded-md">
<h4 class="font-bold">Item Title</h4>
<p class="text-sm">Description of the item.</p>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de filtros
Un componente de filtros de estilo esqueuomórfico diseñado para paneles con un esquema de color en escala de grises y un diseño receptivo con soporte para temas oscuros.
Componente de filtros
Un componente de filtros brutalistas con CSS de Tailwind, con un diseño responsivo, compatibilidad con temas oscuros y marcadores de posición para imágenes y avatares.
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.