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
Casella di ricerca Glassmorphism
Un componente della casella di ricerca glassmorphism semplice e reattivo con colori in scala di grigi, adatto per una dashboard. Supporta la modalità oscura.
Componente della casella di ricerca Glassmorphism
Un componente reattivo della casella di ricerca in stile glassmorphism con colori in scala di grigi, adatto per blog o siti di contenuti, con un input e un pulsante traslucidi simili al vetro smerigliato. Include il supporto per la modalità oscura.
Componente Casella di ricerca
Un componente della casella di ricerca reattivo progettato con i principi del Material Design, con stili CSS Tailwind e supporto per temi scuri.