Casella di ricerca brutalista
Un componente della casella di ricerca brutalista per una dashboard, caratterizzato da una combinazione di colori complementari e complessità moderata, con design reattivo e supporto per temi scuri utilizzando Tailwind CSS.
Codice HTML
<div class="relative max-w-md mx-auto mt-10">
<input type="text" placeholder="Search..." class="w-full px-6 py-4 text-lg text-gray-800 bg-yellow-300 border-4 border-black focus:outline-none focus:border-red-600 dark:bg-yellow-600 dark:text-gray-200 dark:border-white dark:focus:border-red-800">
<svg class="absolute right-0 top-0 mt-4 mr-5 w-6 h-6 text-black dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</div>Componenti correlati
Industrial_Candy_SearchBox
Un componente della casella di ricerca moderatamente complesso e reattivo con un'estetica industriale ma color caramella, progettato per siti Web aziendali professionali, con supporto per la modalità scura.
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.
Componente Casella di ricerca
Un semplice componente della casella di ricerca progettato per le interfacce dei social media con supporto della modalità oscura e una combinazione di colori complementare.