Cuadro de búsqueda de Material Design
Un componente de cuadro de búsqueda inspirado en los principios de Material Design, creado con Tailwind CSS. Cuenta con un comportamiento responsivo que se adapta al ancho del contenedor, retroalimentación visual a través de transiciones de sombras de desplazamiento y enfoque (efectos de profundidad) y soporte integral de temas oscuros. El componente incluye un icono de búsqueda principal y garantiza una estética limpia y moderna. Implementación solo de CSS. Ideal para incrustar en varios diseños debido a su naturaleza 'w-full'. Para la accesibilidad, asegúrese de emparejar el elemento 'input' con un '<label>' correspondiente o proporcione una 'aria-label' descriptiva.
Código HTML
<!-- Component Start: Material Design Search Box -->
<div class="flex items-center w-full bg-white dark:bg-gray-700 shadow-md hover:shadow-lg focus-within:shadow-lg transition-shadow duration-200 ease-in-out rounded-lg">
<div class="pl-4 pr-2 py-3">
<svg class="h-5 w-5 text-gray-500 dark:text-gray-400 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<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" />
</svg>
</div>
<input
type="search"
name="search_query"
id="material_search_box_input"
placeholder="Search..."
aria-label="Search"
class="
appearance-none
w-full h-12
pl-0 pr-4 py-3
text-base text-gray-900 dark:text-gray-100
bg-transparent
focus:outline-none
placeholder-gray-500 dark:placeholder-gray-400
"
/>
</div>
<!-- Component End -->Componentes relacionados
Componente de cuadro de búsqueda
Un cuadro de búsqueda responsivo con soporte para modo oscuro usando Tailwind CSS.
Componente de cuadro de búsqueda
Un componente de cuadro de búsqueda receptivo con un diseño minimalista/plano, combinación de colores vibrantes e interacciones complejas, adecuado para sitios web comerciales/corporativos. Es compatible con el modo oscuro y está construido con Tailwind CSS.
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.