Componentes Cuadro de búsqueda Cuadro de búsqueda de glassmorphism

Cuadro de búsqueda de glassmorphism

Un componente de cuadro de búsqueda de glassmorphism simple y receptivo con colores en escala de grises, adecuado para un tablero. Soporta el modo oscuro.

Vista previa

Código HTML

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative w-full max-w-md">
    <input type="text" placeholder="Search..." class="w-full py-3 px-5 pr-12 rounded-lg backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 border border-gray-200 dark:border-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-600 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 transition duration-300 ease-in-out"
    />
    <div class="absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none">
      <svg class="h-5 w-5 text-gray-600 dark:text-gray-400" 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>
    </div>
  </div>
</div>

Componentes relacionados

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.

Abrir

Componente de cuadro de búsqueda

Componente de cuadro de búsqueda con diseño 3D, efectos responsivos y compatibilidad con temas oscuros.

Abrir

Cuadro de búsqueda orgánico inspirado en la naturaleza

Un componente de cuadro de búsqueda simple y receptivo con un diseño orgánico inspirado en la naturaleza y un degradado de arco iris, adecuado para sitios web comerciales o corporativos. Incluye soporte para modo oscuro.

Abrir