Componente de cuadro de búsqueda
Un componente de cuadro de búsqueda diseñado con el estilo Brutalismo mediante CSS de Tailwind. Cuenta con un diseño de alto contraste, efectos responsivos y admite temas oscuros.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg p-6 shadow-lg w-full max-w-md">
<h2 class="text-xl font-bold text-gray-800 dark:text-white text-center mb-4">Search</h2>
<div class="flex items-center border-b border-gray-300 dark:border-gray-700 mb-4">
<input type="text" placeholder="Type your search..." class="flex-1 bg-transparent text-gray-800 dark:text-white p-2 outline-none" />
<button class="p-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-800 dark:hover:bg-blue-700 text-white rounded-r-lg">
<span>🔍</span>
</button>
</div>
<img src="https://picsum.photos/400/200" class="w-full rounded-lg shadow-md" alt="Random image" />
<div class="flex justify-between mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" class="w-10 h-10 rounded-full" alt="User Avatar" />
<img src="https://randomuser.me/api/portraits/women/1.jpg" class="w-10 h-10 rounded-full" alt="User Avatar" />
</div>
<p class="text-gray-600 dark:text-gray-400 text-center mt-2">Explore and find information quickly.</p>
</div>
</div>Componentes relacionados
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.
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.
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.