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.
Código HTML
<div class="flex justify-center items-center h-screen bg-gray-100 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 w-96">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 text-center">Search</h2>
<div class="relative">
<input type="text" placeholder="Search..." class="block w-full px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 rounded-md border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 transition duration-150 ease-in-out" />
<button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-150 ease-in-out">Search</button>
</div>
<div class="mt-4 text-center">
<h3 class="text-gray-700 dark:text-gray-300">Looking for something specific?</h3>
<p class="text-gray-500 dark:text-gray-400 text-sm">Type and hit enter or click the search button.</p>
</div>
</div>
</div>Componentes relacionados
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.
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 componente de cuadro de búsqueda simple diseñado para interfaces de redes sociales con soporte para modo oscuro y un esquema de color complementario.