Componente Filtri
Un componente di filtri reattivi progettato con microinterazioni e ottimizzato per il supporto del tema scuro.
Codice HTML
<div class="bg-white dark:bg-gray-800 p-5 rounded-lg shadow-md transition-all duration-300">
<h2 class="text-xl font-semibold mb-4">Filters</h2>
<div class="flex flex-col md:flex-row md:space-x-4 mb-4">
<input type="text" placeholder="Search..." class="border rounded-lg p-2 focus:outline-none focus:ring focus:ring-purple-500 dark:bg-gray-900 dark:border-gray-600 transition duration-300" />
<select class="border rounded-lg p-2 focus:outline-none focus:ring focus:ring-purple-500 dark:bg-gray-900 dark:border-gray-600 transition duration-300">
<option value="">Select Category</option>
<option value="category1">Category 1</option>
<option value="category2">Category 2</option>
</select>
<button class="bg-purple-500 text-white rounded-lg p-2 hover:bg-purple-600 transition duration-300 dark:bg-purple-700 dark:hover:bg-purple-600">Apply</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow transition duration-300 hover:shadow-lg">
<img src="https://picsum.photos/200?random=1" alt="Random Image" class="w-full h-32 object-cover rounded-md mb-2" />
<h3 class="text-lg font-medium">Filter Item 1</h3>
</div>
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow transition duration-300 hover:shadow-lg">
<img src="https://picsum.photos/200?random=2" alt="Random Image" class="w-full h-32 object-cover rounded-md mb-2" />
<h3 class="text-lg font-medium">Filter Item 2</h3>
</div>
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow transition duration-300 hover:shadow-lg">
<img src="https://picsum.photos/200?random=3" alt="Random Image" class="w-full h-32 object-cover rounded-md mb-2" />
<h3 class="text-lg font-medium">Filter Item 3</h3>
</div>
</div>
<div class="mt-4">
<p class="text-sm text-gray-600 dark:text-gray-400">Using filters can help narrow down your search results based on your preferences!</p>
</div>
</div>Componenti correlati
Componente Filtri
Un componente di filtri complesso, reattivo, in stile Glassmorphism con una combinazione di colori analoga per siti Web aziendali/aziendali. Presenta elementi traslucidi ed effetti di sfocatura, con supporto completo della modalità oscura utilizzando Tailwind CSS. Non è incluso alcun JavaScript.
Componente Filtri
Un componente di filtri di stile scheumorfico progettato per dashboard con una combinazione di colori in scala di grigi e un design reattivo con supporto per temi scuri.
Componente Filtri
Un componente di filtri reattivi per l'e-commerce con microinterazioni coinvolgenti e una combinazione di colori triadica, che supporta la modalità scura.