Componente Casella di ricerca
Un componente minimalista della casella di ricerca progettato con Tailwind CSS, con effetti reattivi e supporto per temi scuri.
Codice HTML
<div class="flex justify-center items-center p-4">
<div class="w-full max-w-md">
<form class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
<div class="relative">
<input type="text" class="w-full py-2 pl-10 pr-4 border border-gray-300 rounded text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="Search..." />
<svg class="absolute left-3 top-2.5 w-5 h-5 text-gray-500 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.5 17.5a7 7 0 100-15 7 7 0 000 15zm0 0l5 5m-5-5l-5-5"/>
</svg>
</div>
<button type="submit" class="mt-4 w-full py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-500">Search</button>
</form>
</div>
</div>Componenti correlati
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.
Componente Casella di ricerca
Un componente della casella di ricerca progettato con uno stile scheumorfico per imitare una casella di ricerca del mondo reale, utilizzando una combinazione di colori triadica, adatto a un portfolio e reattivo con il supporto della modalità oscura.
Componente Casella di ricerca
Un semplice componente della casella di ricerca in stile retrò/vintage progettato per un blog o per il consumo di contenuti. Utilizza una combinazione di colori monocromatica ed è reattivo con il supporto del tema scuro.