Componente Filtri
Un componente Brutalist Filters con Tailwind CSS, caratterizzato da un design reattivo, supporto per temi scuri e segnaposto per immagini e avatar.
Codice HTML
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg flex flex-col gap-4">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Filters</h2>
<div class="flex flex-col gap-2">
<label class="block text-gray-700 dark:text-gray-300">Category:</label>
<select class="border-2 border-gray-300 dark:border-gray-600 rounded-lg p-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200">
<option>All</option>
<option>Art</option>
<option>Photography</option>
<option>Music</option>
<option>Technology</option>
</select>
</div>
<div class="flex flex-col gap-2">
<label class="block text-gray-700 dark:text-gray-300">Price Range:</label>
<input type="range" min="0" max="100" class="border-2 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-lg p-2" />
</div>
<div class="flex flex-col gap-2">
<label class="block text-gray-700 dark:text-gray-300">Rating:</label>
<select class="border-2 border-gray-300 dark:border-gray-600 rounded-lg p-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200">
<option>All</option>
<option>1 Star</option>
<option>2 Stars</option>
<option>3 Stars</option>
<option>4 Stars</option>
<option>5 Stars</option>
</select>
</div>
<div class="flex justify-between">
<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg">Reset</button>
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg">Apply Filters</button>
</div>
<div class="mt-4">
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100">Featured Users</h3>
<div class="grid grid-cols-2 gap-4">
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-12 h-12 rounded-full" />
<div>
<h4 class="font-semibold">John Doe</h4>
<p class="text-gray-600 dark:text-gray-300">Photographer</p>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/women/80.jpg" alt="User Avatar" class="w-12 h-12 rounded-full" />
<div>
<h4 class="font-semibold">Jane Smith</h4>
<p class="text-gray-600 dark:text-gray-300">Artist</p>
</div>
</div>
</div>
</div>
<div class="mt-4">
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100">Featured Works</h3>
<div class="grid grid-cols-1 gap-4">
<img src="https://picsum.photos/200/150?random=1" alt="Featured Work" class="rounded-lg shadow-md" />
<img src="https://picsum.photos/200/150?random=2" alt="Featured Work" class="rounded-lg shadow-md" />
<img src="https://picsum.photos/200/150?random=3" alt="Featured Work" class="rounded-lg shadow-md" />
</div>
</div>
</div>Componenti correlati
Componente Filtri
Un componente Filtri reattivo con microinterazioni, animazioni accattivanti e supporto per temi scuri utilizzando Tailwind CSS.
FiltriComponenteNeumorfismo
Un semplice componente di filtri reattivi con interfaccia utente morbida per il neumorfismo, che utilizza una combinazione di colori in scala di grigi, progettato per siti Web aziendali/aziendali. Il componente supporta la modalità oscura ed è costruito con Tailwind CSS senza alcun JavaScript.
Componente Filtri
Un componente Filtri progettato con uno stile scheumorfico, con effetti reattivi e supporto per temi scuri. Questo componente utilizza Tailwind CSS per lo stile e include immagini segnaposto e avatar casuali.