Componente de cuadro de búsqueda
Un componente de cuadro de búsqueda en modo oscuro con diseño responsivo y soporte para temas oscuros. No se utiliza JavaScript. Las imágenes son imágenes de marcador de posición.
Código HTML
<form class="flex items-center w-full max-w-md mx-auto mt-10">
<label for="simple-search" class="sr-only">Search</label>
<div class="relative w-full">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
</svg>
</div>
<input type="text" id="simple-search" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search" required>
</div>
<button type="submit" class="p-2.5 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<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"></path>
</svg>
<span class="sr-only">Search</span>
</button>
</form>Componentes relacionados
Brutalist_Weather_Search_Box
Un componente de cuadro de búsqueda complejo, de alto contraste y estilo brutalista para datos meteorológicos y climáticos, con múltiples elementos de entrada y un diseño receptivo con soporte para 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.
Cuadro de búsqueda Retro Vintage
Un componente de cuadro de búsqueda receptivo con un estilo retro / vintage, que utiliza un esquema de color análogo adecuado para interfaces de redes sociales, con soporte para temas oscuros.