Componente de cuadro de búsqueda
Un componente de cuadro de búsqueda receptivo con un diseño brutalista, que utiliza una combinación de colores complementaria adecuada para sitios web comerciales.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-800 dark:bg-gray-900">
<h1 class="text-4xl font-bold text-white mb-4">Find What You Need</h1>
<div class="flex items-center border-b-2 border-yellow-400 dark:border-blue-400">
<input type="text" placeholder="Search..." class="p-2 bg-gray-700 dark:bg-gray-800 text-yellow-400 dark:text-blue-400 placeholder-yellow-300 placeholder-opacity-50 dark:placeholder-blue-300 dark:placeholder-opacity-50 outline-none w-full" />
<button class="bg-yellow-400 dark:bg-blue-400 text-gray-900 dark:text-white font-bold p-2 ml-2 hover:bg-yellow-500 dark:hover:bg-blue-500 transition duration-200">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Search" class="w-4 h-4 inline-block" />
</button>
</div>
<div class="mt-4">
<img src="https://picsum.photos/300/200" alt="Random Image" class="w-full max-w-md rounded-lg shadow-lg" />
</div>
</div>Componentes relacionados
Componente de cuadro de búsqueda
Un complejo componente de cuadro de búsqueda diseñado en estilo brutalista con una combinación de colores pastel, adaptado a las interfaces de las redes sociales. El componente incluye elementos interactivos como entrada de búsqueda, filtros y un botón de envío, todos compatibles con el modo oscuro.
Componente de cuadro de búsqueda
Un componente de cuadro de búsqueda complejo de estilo Glassmorphism con un esquema de color análogo, adecuado para un portafolio, con diseño receptivo y soporte de temas oscuros que usa solo HTML y Tailwind CSS.
3D_Candy_SearchBox_Manufacturing
Un componente de cuadro de búsqueda responsivo inspirado en 3D con colores dulces/dulces, adecuado para aplicaciones manufactureras/industriales, con un sutil efecto de sombra y elementos interactivos.