Componente Casella di ricerca
Un componente della casella di ricerca reattiva progettato con lo stile glassmorphism, che supporta la modalità oscura e su misura per le applicazioni di e-commerce.
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
<div class="relative">
<input type="text" placeholder="Search for products..." class="w-full md:w-96 p-4 border border-transparent rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-600 focus:outline-none focus:border-transparent focus:ring focus:ring-opacity-50 backdrop-blur-md bg-opacity-30 shadow-lg">
<button class="absolute right-0 top-0 bottom-0 flex items-center px-4 py-2 text-white bg-blue-500 hover:bg-blue-600 rounded-r-lg border border-transparent backdrop-blur-md bg-opacity-30">
<img src="https://picsum.photos/20/20" alt="search icon" class="w-5 h-5" />
</button>
</div>
</div>
<div class="mt-4 text-center text-gray-700 dark:text-gray-300">
<h2 class="text-xl font-semibold">Explore Our Products</h2>
<div class="flex justify-center mt-2 space-x-4">
<img src="https://picsum.photos/200/100" alt="Product 1" class="w-32 h-32 object-cover rounded-lg shadow-md bg-white dark:bg-gray-800" />
<img src="https://picsum.photos/200/100?random=1" alt="Product 2" class="w-32 h-32 object-cover rounded-lg shadow-md bg-white dark:bg-gray-800" />
<img src="https://picsum.photos/200/100?random=2" alt="Product 3" class="w-32 h-32 object-cover rounded-lg shadow-md bg-white dark:bg-gray-800" />
</div>
</div>Componenti correlati
Semplice casella di ricerca pastello 3D
Un componente casella di ricerca reattivo con un design simile al 3D, una combinazione di colori pastello e il supporto per temi scuri, creato con Tailwind CSS per un blog/sito Web di contenuti.
Brutalist_Weather_Search_Box
Un componente complesso, ad alto contrasto, in stile brutalista per i dati meteorologici e climatici, con più elementi di input e un design reattivo con supporto per la modalità oscura.
Casella di ricerca Brutalismo
Componente della casella di ricerca con stile Brutalism, reattivo, supporto per temi scuri, senza JS. Utilizza picsum.photos per le immagini e randomuser.me per gli avatar, se necessario.