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
Brutalist_Weather_Search_Box
Un composant de champ de recherche complexe, contrasté et brutaliste pour les données météorologiques et climatiques, avec plusieurs éléments de saisie et un design réactif avec prise en charge du mode sombre.
Skeuomorphic_Vibrant_Search_Box_Component
Un composant de champ de recherche de complexité modérée avec un design skeuomorphe, une palette de couleurs vives et une réactivité totale avec prise en charge du mode sombre, adapté aux sites de blog/contenu.
Boîte de recherche de la conception matérielle
Un composant de boîte de recherche inspiré des principes de conception matérielle, construit à l’aide de Tailwind CSS. Il présente un comportement réactif s’adaptant à la largeur du conteneur, un retour visuel via des transitions d’ombres de survol et de focus (effets de profondeur) et une prise en charge complète des thèmes sombres. Le composant comprend une icône de recherche principale et garantit une esthétique épurée et moderne. Implémentation CSS uniquement. Idéal pour l’intégration dans diverses dispositions en raison de sa nature « w-full ». Pour des raisons d’accessibilité, assurez-vous d’associer l’élément 'input' à un '<label>' correspondant ou de fournir une 'aria-label' descriptive.