Componente Casella di ricerca
Un componente della casella di ricerca reattivo con un design brutalista, che utilizza una combinazione di colori complementari adatta ai siti Web aziendali.
Codice HTML
<div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-800 dark:bg-gray-900">
<h1 class="text-4xl font-bold text-white mb-4">Find What You Need</h1>
<div class="flex items-center border-b-2 border-yellow-400 dark:border-blue-400">
<input type="text" placeholder="Search..." class="p-2 bg-gray-700 dark:bg-gray-800 text-yellow-400 dark:text-blue-400 placeholder-yellow-300 placeholder-opacity-50 dark:placeholder-blue-300 dark:placeholder-opacity-50 outline-none w-full" />
<button class="bg-yellow-400 dark:bg-blue-400 text-gray-900 dark:text-white font-bold p-2 ml-2 hover:bg-yellow-500 dark:hover:bg-blue-500 transition duration-200">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Search" class="w-4 h-4 inline-block" />
</button>
</div>
<div class="mt-4">
<img src="https://picsum.photos/300/200" alt="Random Image" class="w-full max-w-md rounded-lg shadow-lg" />
</div>
</div>Componenti correlati
Semplice casella di ricerca pastello 3D
Un componente casella di ricerca reattivo con un design simile al 3D, una combinazione di colori pastello e il supporto per temi scuri, creato con Tailwind CSS per un blog/sito Web di contenuti.
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.
Componente Casella di ricerca
Un componente della casella di ricerca reattivo con un design minimalista/piatto, una combinazione di colori vivaci e interazioni complesse, adatto per siti Web aziendali/aziendali. Supporta la modalità oscura ed è costruito con Tailwind CSS.