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.
Código HTML
<div class="flex flex-col items-center justify-center p-6 bg-gradient-to-r from-gray-800 to-gray-700 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105">
<h2 class="text-white text-2xl font-semibold mb-4">Search Our Resources</h2>
<div class="relative w-full max-w-md">
<input type="text" placeholder="Search..." class="w-full p-4 pl-10 text-gray-900 dark:text-gray-300 bg-white dark:bg-gray-800 rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300 transition-all duration-200" />
<div class="absolute inset-y-0 left-0 flex items-center pl-3">
<img src="https://picsum.photos/20/20" alt="Search Icon" class="w-5 h-5 text-gray-400 dark:text-gray-500" />
</div>
</div>
<div class="flex justify-between items-center w-full mt-4">
<button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg shadow hover:bg-blue-700 transition-all duration-200">Search</button>
<button class="px-4 py-2 text-sm font-medium text-gray-200 dark:text-gray-400 hover:underline">Advanced Search</button>
</div>
</div>Componentes relacionados
Cuadro de búsqueda brutalista
Un componente de cuadro de búsqueda brutalista con colores vibrantes y soporte para temas oscuros.
Cuadro de búsqueda brutalista
Un componente de cuadro de búsqueda brutalista para un tablero, con un esquema de color complementario y una complejidad moderada, con diseño receptivo y soporte de temas oscuros mediante Tailwind CSS.
Componente de cuadro de búsqueda
Un componente de cuadro de búsqueda responsivo diseñado con los principios de Material Design, con estilos CSS de Tailwind y compatibilidad con temas oscuros.