Composants Boîte de recherche Composant de zone de recherche

Composant de zone de recherche

Un composant de champ de recherche réactif avec un design brutaliste, utilisant une palette de couleurs complémentaires adaptée aux sites Web d’entreprise.

Aperçu

HTML Code

<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>

Composants associés

Composant de la boîte de recherche de jeux

Un composant de champ de recherche réactif et simple pour les sites Web de jeux, inspiré des principes de conception du Bauhaus avec une palette de couleurs forêt/vert et la prise en charge du mode sombre.

Ouvrir

3D_Candy_SearchBox_Manufacturing

Un composant de boîte de recherche réactif inspiré de la 3D avec des couleurs bonbon/douces, adapté aux applications manufacturières/industrielles, avec un effet d’ombre subtil et des éléments interactifs.

Ouvrir

Boîte de recherche 3D pastel simple

Un composant de champ de recherche réactif avec un design de type 3D, une palette de couleurs pastel et une prise en charge du thème sombre, conçu avec Tailwind CSS pour un site Web de blog/contenu.

Ouvrir