Industrial_Food_Search_Box
Un composant de champ de recherche de style industriel réactif et à contraste élevé pour les sites Web d’alimentation/restaurant, avec des éléments exposés, une prise en charge du mode sombre et une complexité modérée.
HTML Code
<div class="bg-gray-100 dark:bg-gray-900 min-h-max flex items-center justify-center p-4 sm:p-6 lg:p-8 font-sans">
<div class="w-full max-w-2xl bg-white dark:bg-gray-800 shadow-xl rounded-lg border-2 border-gray-300 dark:border-gray-700 overflow-hidden">
<div class="flex flex-col sm:flex-row items-center p-4 sm:p-6 bg-gray-50 dark:bg-gray-850 border-b-2 border-gray-200 dark:border-gray-700">
<div class="flex-shrink-0 text-gray-700 dark:text-gray-300 mr-0 sm:mr-4 mb-2 sm:mb-0">
<svg class="w-8 h-8 sm:w-10 sm:h-10" 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 class="flex-grow w-full">
<label for="search-food" class="sr-only">Search for food or restaurants</label>
<input id="search-food" type="text" placeholder=" cravings... pizza, sushi, burgers, pasta" class="w-full p-3 text-base sm:text-lg bg-transparent text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent font-mono tracking-wide" aria-label="Search for food or restaurants">
</div>
<button class="mt-4 sm:mt-0 ml-0 sm:ml-4 px-6 py-3 bg-orange-600 hover:bg-orange-700 text-white font-bold rounded-md shadow-lg transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-850 flex items-center justify-center">
<svg class="w-5 h-5 mr-2" 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>
Search
</button>
</div>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-px bg-gray-200 dark:bg-gray-700 border-t-2 border-gray-200 dark:border-gray-700">
<!-- Category 1 -->
<div class="p-3 sm:p-4 bg-white dark:bg-gray-800 flex flex-col items-center justify-center text-center group transition duration-200 ease-in-out hover:bg-gray-50 dark:hover:bg-gray-750 cursor-pointer">
<img src="https://picsum.photos/id/1080/60/60" alt="Pizza" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-gray-300 dark:border-gray-600 object-cover mb-2 transform group-hover:scale-110 transition-transform" />
<span class="text-xs sm:text-sm text-gray-700 dark:text-gray-300 font-semibold uppercase tracking-wider group-hover:text-orange-600 dark:group-hover:text-orange-400">Pizza</span>
</div>
<!-- Category 2 -->
<div class="p-3 sm:p-4 bg-white dark:bg-gray-800 flex flex-col items-center justify-center text-center group transition duration-200 ease-in-out hover:bg-gray-50 dark:hover:bg-gray-750 cursor-pointer">
<img src="https://picsum.photos/id/1054/60/60" alt="Sushi" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-gray-300 dark:border-gray-600 object-cover mb-2 transform group-hover:scale-110 transition-transform" />
<span class="text-xs sm:text-sm text-gray-700 dark:text-gray-300 font-semibold uppercase tracking-wider group-hover:text-orange-600 dark:group-hover:text-orange-400">Sushi</span>
</div>
<!-- Category 3 -->
<div class="p-3 sm:p-4 bg-white dark:bg-gray-800 flex flex-col items-center justify-center text-center group transition duration-200 ease-in-out hover:bg-gray-50 dark:hover:bg-gray-750 cursor-pointer">
<img src="https://picsum.photos/id/111/60/60" alt="Burgers" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-gray-300 dark:border-gray-600 object-cover mb-2 transform group-hover:scale-110 transition-transform" />
<span class="text-xs sm:text-sm text-gray-700 dark:text-gray-300 font-semibold uppercase tracking-wider group-hover:text-orange-600 dark:group-hover:text-orange-400">Burgers</span>
</div>
<!-- Category 4 -->
<div class="p-3 sm:p-4 bg-white dark:bg-gray-800 flex flex-col items-center justify-center text-center group transition duration-200 ease-in-out hover:bg-gray-50 dark:hover:bg-gray-750 cursor-pointer">
<img src="https://picsum.photos/id/1084/60/60" alt="Desserts" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-gray-300 dark:border-gray-600 object-cover mb-2 transform group-hover:scale-110 transition-transform" />
<span class="text-xs sm:text-sm text-gray-700 dark:text-gray-300 font-semibold uppercase tracking-wider group-hover:text-orange-600 dark:group-hover:text-orange-400">Desserts</span>
</div>
</div>
<div class="p-4 sm:p-6 bg-gray-100 dark:bg-gray-850 border-t-2 border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row items-center justify-between">
<div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 mb-3 sm:mb-0">
Explore popular cuisines or filter by location.
</div>
<button class="flex items-center px-4 py-2 bg-gray-300 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 text-sm font-semibold rounded-md transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">
<svg class="w-4 h-4 mr-2" 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="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
</svg>
Advanced Filters
</button>
</div>
</div>
</div>Composants associés
Composant de zone de recherche
Un composant de champ de recherche de style 3D conçu pour les sites Web d’entreprise et d’entreprise, doté d’une interface complexe avec de la profondeur, des éléments interactifs et une prise en charge du mode sombre.
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.
Boîte de recherche Glassmorphism
Un composant de boîte de recherche glassmorphism simple et réactif avec des couleurs en niveaux de gris, adapté à un tableau de bord. Prend en charge le mode sombre.