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
Caja de búsqueda retro
Cuadro de búsqueda retro / vintage con estética de los 80 / 90, responsivo, soporte de modo oscuro.
Cuadro de búsqueda simple de pastel en 3D
Un componente de cuadro de búsqueda responsivo con un diseño similar al 3D, combinación de colores pastel y compatibilidad con temas oscuros, creado con Tailwind CSS para un sitio web de blog/contenido.
Bauhaus_Agriculture_Search_Box
Componente de cuadro de búsqueda receptivo para sitios web de agricultura/ganadería, diseñado con los principios de la Bauhaus, tonos sepia/marrones y compatibilidad con el modo oscuro.