Composant de zone de recherche
Un composant de champ de recherche réactif conçu avec le style glassmorphism, prenant en charge le mode sombre et adapté aux applications de commerce électronique.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
<div class="relative">
<input type="text" placeholder="Search for products..." class="w-full md:w-96 p-4 border border-transparent rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-600 focus:outline-none focus:border-transparent focus:ring focus:ring-opacity-50 backdrop-blur-md bg-opacity-30 shadow-lg">
<button class="absolute right-0 top-0 bottom-0 flex items-center px-4 py-2 text-white bg-blue-500 hover:bg-blue-600 rounded-r-lg border border-transparent backdrop-blur-md bg-opacity-30">
<img src="https://picsum.photos/20/20" alt="search icon" class="w-5 h-5" />
</button>
</div>
</div>
<div class="mt-4 text-center text-gray-700 dark:text-gray-300">
<h2 class="text-xl font-semibold">Explore Our Products</h2>
<div class="flex justify-center mt-2 space-x-4">
<img src="https://picsum.photos/200/100" alt="Product 1" class="w-32 h-32 object-cover rounded-lg shadow-md bg-white dark:bg-gray-800" />
<img src="https://picsum.photos/200/100?random=1" alt="Product 2" class="w-32 h-32 object-cover rounded-lg shadow-md bg-white dark:bg-gray-800" />
<img src="https://picsum.photos/200/100?random=2" alt="Product 3" class="w-32 h-32 object-cover rounded-lg shadow-md bg-white dark:bg-gray-800" />
</div>
</div>Composants associés
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.
Composant de boîte de recherche skeuomorphe
Boîte de recherche skeuomorphique pour les médias sociaux
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.