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.
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
<div class="relative w-full max-w-md">
<input type="text" placeholder="Search..."
class="w-full p-4 pl-10 pr-4 text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-900 rounded-lg shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700"/>
<div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a7 7 0 100 14 7 7 0 000-14zM16.293 16.293a8 8 0 111.414-1.414l4.281 4.283-1.414 1.414-4.282-4.283z" />
</svg>
</div>
</div>
</div>Componenti correlati
Neon_Glow_Search_Box
Un componente della casella di ricerca semplice e reattivo con effetti di bagliore al neon con blu elettrico e rosa acceso per applicazioni tecnologiche/SaaS, incluso il supporto della modalità scura.
Casella di ricerca skeuomorfa
Un componente della casella di ricerca con un design scheumorfico che imita gli elementi del mondo reale, con reattività e supporto per temi scuri.
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.