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.
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 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.
Componente de cuadro de búsqueda
Un componente de cuadro de búsqueda minimalista diseñado con Tailwind CSS, con efectos responsivos y compatibilidad con temas oscuros.
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.