Componente de cuadro de búsqueda
Un componente de cuadro de búsqueda receptivo diseñado con estilo glassmorphism, compatible con el modo oscuro y adaptado para aplicaciones de comercio electrónico.
Código HTML
<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>Componentes relacionados
Componente de cuadro de búsqueda
Un componente de cuadro de búsqueda receptivo para sitios web comerciales / corporativos, con microinteracciones y un esquema de color análogo. Incluye una entrada de búsqueda, un botón y un menú desplegable de resultados dinámicos con avatares de usuario y texto, compatible con el modo oscuro.
Componente de cuadro de búsqueda
Un componente de cuadro de búsqueda de estilo 3D diseñado para sitios web comerciales y corporativos, con una interfaz compleja con profundidad, elementos interactivos y compatibilidad con el modo oscuro.
Componente del cuadro de búsqueda de glassmorphism
Un componente de cuadro de búsqueda de estilo glassmorphism receptivo con colores en escala de grises, adecuado para blogs o sitios de contenido, con una entrada y un botón translúcidos similares al vidrio esmerilado. Incluye soporte para modo oscuro.