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
Componente Casella di ricerca
Un componente della casella di ricerca progettato con lo stile Brutalism utilizzando Tailwind CSS. Presenta un design ad alto contrasto, effetti reattivi e supporta il tema scuro.
Componente Casella di ricerca
Un componente della casella di ricerca retrò/vintage con Tailwind CSS. È dotato di un design reattivo, supporto per temi scuri e immagini segnaposto.
Componente Casella di ricerca
Un complesso componente della casella di ricerca progettato in stile brutalista con una combinazione di colori pastello, su misura per le interfacce dei social media. Il componente include elementi interattivi come l'input di ricerca, i filtri e un pulsante di invio, che supportano la modalità oscura.