Componente de cuadro de búsqueda
Un componente de cuadro de búsqueda diseñado con un estilo esqueuomórfico para imitar un cuadro de búsqueda del mundo real, utilizando un esquema de color triádico, adecuado para una cartera y responsivo con soporte de modo oscuro.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
<div class="relative w-full max-w-md">
<input type="text" placeholder="Search..."
class="w-full p-4 pl-10 pr-4 text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-900 rounded-lg shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700"/>
<div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-600">
<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="M11 4a7 7 0 100 14 7 7 0 000-14zM16.293 16.293a8 8 0 111.414-1.414l4.281 4.283-1.414 1.414-4.282-4.283z" />
</svg>
</div>
</div>
</div>Componentes relacionados
Componente de cuadro de búsqueda
Un componente de cuadro de búsqueda de diseño minimalista y plano con una combinación de colores pastel, interfaz compleja con múltiples elementos interactivos, diseñado para un portafolio que muestra trabajos o productos.
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.
Componente de cuadro de búsqueda
Componente de cuadro de búsqueda con diseño 3D, efectos responsivos y compatibilidad con temas oscuros.