Componente de cuadro de búsqueda
Un componente de cuadro de búsqueda receptivo para sitios web comerciales / corporativos, con microinteracciones y un esquema de color análogo. Incluye una entrada de búsqueda, un botón y un menú desplegable de resultados dinámicos con avatares de usuario y texto, compatible con el modo oscuro.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="relative w-full max-w-md">
<div class="relative flex items-center w-full h-12 rounded-lg shadow-lg bg-white dark:bg-gray-800 overflow-hidden group">
<div class="grid place-items-center h-full w-12 text-gray-300 dark:text-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
<input
class="peer h-full w-full outline-none text-sm text-gray-700 dark:text-gray-200 pr-2 bg-white dark:bg-gray-800 transition-all duration-300 focus:w-[calc(100%-3rem)]"
type="text"
id="search-input"
placeholder="Search for services, products, or people..." />
<button class="absolute right-0 h-full w-12 bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 text-white rounded-r-lg flex items-center justify-center transition-all duration-300 group-focus-within:w-24 group-focus-within:bg-blue-600 group-focus-within:dark:bg-blue-800">
<span class="hidden group-focus-within:block text-sm">Search</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 group-focus-within:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</button>
</div>
<!-- Search Results Dropdown -->
<div class="absolute w-full mt-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden opacity-0 scale-y-0 transform origin-top transition-all duration-300 group-focus-within:opacity-100 group-focus-within:scale-y-100">
<ul class="py-2">
<!-- Result Item 1 -->
<li class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">
<img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div>
<p class="text-sm font-semibold text-gray-800 dark:text-gray-100">John Doe</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Software Engineer at TechCorp</p>
</div>
</li>
<!-- Result Item 2 -->
<li class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">
<img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
<div>
<p class="text-sm font-semibold text-gray-800 dark:text-gray-100">Jane Smith</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Marketing Manager at GlobalBiz</p>
</div>
</li>
<!-- Result Item 3 -->
<li class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">
<img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
<div>
<p class="text-sm font-semibold text-gray-800 dark:text-gray-100">Company XYZ Services</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Cloud Computing Solutions</p>
</div>
</li>
<!-- Result Item 4 -->
<li class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">
<img class="w-8 h-8 rounded-full mr-3" src="https://picsum.photos/id/1018/100/100" alt="Product Image">
<div>
<p class="text-sm font-semibold text-gray-800 dark:text-gray-100">Product A</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Advanced Analytics Platform</p>
</div>
</li>
<!-- Result Item 5 -->
<li class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">
<img class="w-8 h-8 rounded-full mr-3" src="https://picsum.photos/id/1015/100/100" alt="Service Image">
<div>
<p class="text-sm font-semibold text-gray-800 dark:text-gray-100">Consulting Services</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Strategic Business Consultation</p>
</div>
</li>
</ul>
</div>
</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 de cuadro de búsqueda
Componente de cuadro de búsqueda con diseño 3D, efectos responsivos y compatibilidad con temas oscuros.
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.