Composant de zone de recherche
Un composant de champ de recherche réactif avec un design minimaliste/plat, une palette de couleurs vives et des interactions complexes, adapté aux sites Web d’entreprise. Il prend en charge le mode sombre et est construit avec Tailwind CSS.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Search for Services</h2>
<!-- Search Input with Advanced Options -->
<div class="relative mb-6">
<input type="text" placeholder="Search..." class="w-full py-3 pl-4 pr-12 text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded-lg focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600 transition duration-300">
<button class="absolute inset-y-0 right-0 flex items-center pr-4 text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 transition duration-300">
<svg class="h-6 w-6" 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>
</button>
</div>
<!-- Filter and Sort Options -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
<div>
<label for="category" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Category</label>
<select id="category" class="w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-400 dark:focus:ring-purple-500">
<option>All Categories</option>
<option>Marketing</option>
<option>Development</option>
<option>Design</option>
<option>Consulting</option>
</select>
</div>
<div>
<label for="sort" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Sort By</label>
<select id="sort" class="w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-400 dark:focus:ring-purple-500">
<option>Relevance</option>
<option>Date Posted</option>
<option>Rating</option>
</select>
</div>
</div>
<!-- Price Range Slider (Conceptual - without JS) -->
<div class="mb-6">
<label for="price-range" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Price Range</label>
<div class="flex items-center space-x-4">
<span class="text-gray-600 dark:text-gray-400">$50</span>
<input type="range" id="price-range" min="0" max="1000" value="500" class="w-full h-2 bg-purple-300 dark:bg-purple-700 rounded-lg appearance-none cursor-pointer thumb-purple-500 dark:thumb-purple-400">
<span class="text-gray-600 dark:text-gray-400">$1000+</span>
</div>
</div>
<!-- Tags/Keywords Input -->
<div class="mb-6">
<label for="keywords" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Keywords</label>
<input type="text" id="keywords" placeholder="Enter keywords (e.g., Composants associés
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.
Composant de zone de recherche
Un composant de champ de recherche complexe conçu dans un style brutaliste avec une palette de couleurs pastel, adapté aux interfaces de médias sociaux. Le composant comprend des éléments interactifs tels que la saisie de recherche, des filtres et un bouton d’envoi, tous prenant en charge le mode sombre.
Champ de recherche Brutalisme
Composant de boîte de recherche avec style Brutalism, réactif, prise en charge du thème sombre, pas de JS. Utilise picsum.photos pour les images et randomuser.me pour les avatars si nécessaire.