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
Boîte de recherche brutaliste
Un composant de champ de recherche brutaliste pour un tableau de bord, doté d’une palette de couleurs complémentaires et d’une complexité modérée, avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant de zone de recherche
Un composant de champ de recherche minimaliste conçu avec Tailwind CSS, avec des effets réactifs et la prise en charge des thèmes sombres.
Boîte de recherche rétro
Boîte de recherche rétro/vintage avec esthétique des années 80/90, réactif, prise en charge du mode sombre.