Composant de la boîte de recherche Glassmorphism
Un composant de boîte de recherche moderne avec un effet de verre dépoli (glassmorphism) utilisant des couleurs pastel. Le composant est simple mais élégant, conçu pour les sites Web d’entreprise professionnels. Il présente un arrière-plan translucide avec des effets de flou subtils, un design réactif et une prise en charge du mode sombre. La boîte de recherche comprend une icône de recherche et un champ de saisie propre qui s’adapte bien aux environnements d’entreprise.
HTML Code
<!-- Glassmorphism Search Box Component -->
<div class="w-full max-w-md mx-auto px-4">
<!-- Search Container with Glassmorphism Effect -->
<div class="relative backdrop-blur-sm bg-white/40 dark:bg-gray-800/40 border border-gray-200 dark:border-gray-700 rounded-full px-4 py-2 flex items-center shadow-lg transition-all duration-300 hover:shadow-xl">
<!-- Search Icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
<!-- Search Input -->
<input
type="text"
placeholder="Search..."
class="w-full bg-transparent border-none focus:ring-0 focus:outline-none ml-2 text-gray-600 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500"
>
<!-- Optional Clear Button -->
<button class="text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-300 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Optional Hint Text -->
<div class="text-xs text-center mt-2 text-gray-400 dark:text-gray-500">
Search for products, services, or information
</div>
</div>Composants associés
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.
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.
Composant de zone de recherche
Un composant de boîte de recherche conçu avec un style skeuomorphe pour imiter une boîte de recherche du monde réel, à l’aide d’un schéma de couleurs triadique, adapté à un portefeuille et réactif avec la prise en charge du mode sombre.