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.
Codice HTML
<!-- Component Start: Material Design Search Box -->
<div class="flex items-center w-full bg-white dark:bg-gray-700 shadow-md hover:shadow-lg focus-within:shadow-lg transition-shadow duration-200 ease-in-out rounded-lg">
<div class="pl-4 pr-2 py-3">
<svg class="h-5 w-5 text-gray-500 dark:text-gray-400 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
</svg>
</div>
<input
type="search"
name="search_query"
id="material_search_box_input"
placeholder="Search..."
aria-label="Search"
class="
appearance-none
w-full h-12
pl-0 pr-4 py-3
text-base text-gray-900 dark:text-gray-100
bg-transparent
focus:outline-none
placeholder-gray-500 dark:placeholder-gray-400
"
/>
</div>
<!-- Component End -->Componenti correlati
Bauhaus_Agriculture_Search_Box
Componente della casella di ricerca reattiva per siti Web di agricoltura/allevamento, progettato con i principi Bauhaus, toni seppia/marrone e supporto per la modalità scura.
Componente Casella di ricerca
Un componente della casella di ricerca reattiva progettato in uno stile brutalista con supporto per temi scuri utilizzando Tailwind CSS.
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.