Bauhaus_Agriculture_Search_Box
Composant de champ de recherche réactif pour les sites Web agricoles/agricoles, conçu avec les principes du Bauhaus, les tons sépia/brun et la prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-amber-50 dark:bg-stone-900 border-b border-amber-200 dark:border-stone-700 font-sans">
<div class="max-w-4xl mx-auto py-4 sm:py-6 md:py-8 bg-amber-100 dark:bg-stone-800 shadow-lg rounded-lg overflow-hidden border-2 border-amber-300 dark:border-stone-700">
<div class="px-5 py-4 sm:px-6 sm:py-5 flex flex-col sm:flex-row items-center justify-between">
<h2 class="text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-100 mb-4 sm:mb-0 text-center sm:text-left tracking-wider uppercase">
Field Finder
</h2>
<div class="relative w-full sm:w-auto flex-grow max-w-md">
<input type="text" placeholder="Search crops, fields, or equipment..." class="w-full py-3 pl-12 pr-4 rounded-full bg-amber-50 dark:bg-stone-700 text-stone-700 dark:text-stone-200 placeholder-stone-500 dark:placeholder-stone-400 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-300 border border-amber-300 dark:border-stone-600 shadow-inner text-base sm:text-lg transition-all duration-300 ease-in-out">
<svg class="absolute left-4 top-1/2 transform -translate-y-1/2 w-6 h-6 text-stone-500 dark:text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</div>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 px-5 py-4 sm:px-6 sm:py-5 border-t border-amber-200 dark:border-stone-700">
<button class="flex items-center justify-center p-3 sm:p-4 bg-amber-200 hover:bg-amber-300 dark:bg-stone-700 dark:hover:bg-stone-600 rounded-lg text-stone-700 dark:text-stone-100 font-semibold text-sm sm:text-base transition-colors duration-200 ease-in-out border-b-2 border-r-2 border-amber-400 dark:border-amber-600 shadow-md transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-300">
<svg class="w-5 h-5 sm:w-6 sm:h-6 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 012.707 13H3a1 1 0 000-2H2.707L3 10.707V8a7 7 0 0114 0v2.707l.293.293A1 1 0 0117.293 13H17a1 1 0 100-2h.293l-.707-.707V8a6 6 0 00-6-6zM5 16a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z"></path></svg>
Plots
</button>
<button class="flex items-center justify-center p-3 sm:p-4 bg-amber-200 hover:bg-amber-300 dark:bg-stone-700 dark:hover:bg-stone-600 rounded-lg text-stone-700 dark:text-stone-100 font-semibold text-sm sm:text-base transition-colors duration-200 ease-in-out border-b-2 border-r-2 border-amber-400 dark:border-amber-600 shadow-md transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-300">
<svg class="w-5 h-5 sm:w-6 sm:h-6 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.586l.293.293A1 1 0 0117.293 13H17a1 1 0 100-2h.293l-.707-.707V8a1 1 0 00-1-1H4a1 1 0 00-1 1v.586L2.707 9.707A1 1 0 012.707 11H3a1 1 0 100-2h.293l-.707-.707V8a2 2 0 012-2h2zm0 6a2 2 0 100 4h8a2 2 0 100-4H6z" clip-rule="evenodd"></path></svg>
Crops
</button>
<button class="flex items-center justify-center p-3 sm:p-4 bg-amber-200 hover:bg-amber-300 dark:bg-stone-700 dark:hover:bg-stone-600 rounded-lg text-stone-700 dark:text-stone-100 font-semibold text-sm sm:text-base transition-colors duration-200 ease-in-out border-b-2 border-r-2 border-amber-400 dark:border-amber-600 shadow-md transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-300">
<svg class="w-5 h-5 sm:w-6 sm:h-6 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M7 3a1 1 0 00-2 0v1a1 1 0 002 0V3zM10 3a1 1 0 00-2 0v1a1 1 0 002 0V3zM13 3a1 1 0 00-2 0v1a1 1 0 002 0V3z"></path><path fill-rule="evenodd" d="M3 8a3 3 0 013-3h8a3 3 0 013 3v7a3 3 0 01-3 3H6a3 3 0 01-3-3V8zm5-1a1 1 0 000 2h4a1 1 0 100-2H8zm-1 3a1 1 0 000 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg>
Equipment
</button>
<button class="flex items-center justify-center p-3 sm:p-4 bg-amber-200 hover:bg-amber-300 dark:bg-stone-700 dark:hover:bg-stone-600 rounded-lg text-stone-700 dark:text-stone-100 font-semibold text-sm sm:text-base transition-colors duration-200 ease-in-out border-b-2 border-r-2 border-amber-400 dark:border-amber-600 shadow-md transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-300">
<svg class="w-5 h-5 sm:w-6 sm:h-6 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M.5 1V.5a.5.5 0 011 0V1A5.5 5.5 0 007 6.5h6A5.5 5.5 0 0018.5 1V.5a.5.5 0 011 0V1a6.5 6.5 0 01-6.5 6.5H7A6.5 6.5 0 01.5 1zM2 11.5a1 1 0 112 0 1 1 0 01-2 0zm14 0a1 1 0 112 0 1 1 0 01-2 0z" clip-rule="evenodd"></path><path d="M11 5H9a1 1 0 00-1 1v3a1 1 0 001 1h2a1 1 0 001-1V6a1 1 0 00-1-1zm3 11a1 1 0 100-2 1 1 0 000 2zm-8 0a1 1 0 100-2 1 1 0 000 2z"></path></svg>
Weather
</button>
</div>
</div>
</div>Composants associés
Composant de zone de recherche
Un composant de champ de recherche réactif conçu selon les principes de Material Design, avec des styles CSS Tailwind et la prise en charge du thème sombre.
Champ de recherche inspiré de la nature biologique
Un composant de champ de recherche simple et réactif avec un design organique, inspiré de la nature et un dégradé arc-en-ciel, adapté aux sites Web d’entreprise ou d’entreprise. Inclut la prise en charge du mode sombre.
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.