Componenti Casella di ricerca Componente Casella di ricerca

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.

Anteprima

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

Casella di ricerca Material Design

Un componente della casella di ricerca ispirato ai principi di Material Design, creato utilizzando Tailwind CSS. Presenta un comportamento reattivo che si adatta alla larghezza del contenitore, un feedback visivo attraverso transizioni di ombre al passaggio del mouse e di messa a fuoco (effetti di profondità) e un supporto completo per il tema scuro. Il componente include un'icona di ricerca in primo piano e garantisce un'estetica pulita e moderna. Implementazione solo CSS. Ideale per l'incorporamento in vari layout grazie alla sua natura "w-full". Per l'accessibilità, assicurati di abbinare l'elemento 'input' con un '<label>' corrispondente o fornisci una 'aria-label' descrittiva.

Aperto