Componente del cuadro de búsqueda de glassmorphism
Un componente de cuadro de búsqueda moderno con un efecto de vidrio esmerilado (glassmorphism) que usa colores pastel. El componente es simple pero elegante, diseñado para sitios web comerciales profesionales. Cuenta con un fondo translúcido con sutiles efectos de desenfoque, diseño receptivo y compatibilidad con el modo oscuro. El cuadro de búsqueda incluye un icono de búsqueda y un campo de entrada limpio que se adapta bien a los entornos corporativos.
Código HTML
<!-- 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>Componentes relacionados
Componente de cuadro de búsqueda
Un componente de cuadro de búsqueda receptivo diseñado en un estilo brutalista con soporte para temas oscuros utilizando Tailwind CSS.
Cuadro de búsqueda brutalista
Un componente de cuadro de búsqueda brutalista con colores vibrantes y soporte para temas oscuros.
Cuadro de búsqueda Retro Vintage
Un componente de cuadro de búsqueda receptivo con un estilo retro / vintage, que utiliza un esquema de color análogo adecuado para interfaces de redes sociales, con soporte para temas oscuros.