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.
Cuadro de búsqueda skeuomórfico
Un componente de cuadro de búsqueda con un diseño skeuomórfico que imita elementos del mundo real, con capacidad de respuesta y compatibilidad con temas oscuros.
Componente de cuadro de búsqueda
Un simple componente de cuadro de búsqueda de estilo retro/vintage diseñado para un blog o consumo de contenido. Utiliza un esquema de color monocromático y responde con soporte para temas oscuros.