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.
Código HTML
<div class="w-full max-w-md mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">Search</h2>
<form class="flex flex-col space-y-4">
<input type="text" placeholder="Search..." class="p-4 border-2 border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-600 transition duration-200" />
<div class="flex flex-wrap justify-between">
<select class="w-full md:w-auto p-2 rounded-lg border-2 border-gray-300 dark:border-gray-600 focus:outline-none dark:bg-gray-700 dark:text-white">
<option value="all">All</option>
<option value="images">Images</option>
<option value="videos">Videos</option>
<option value="users">Users</option>
</select>
<button class="flex items-center justify-center w-full md:w-auto p-3 bg-pink-500 dark:bg-pink-700 text-white rounded-lg shadow hover:bg-pink-600 dark:hover:bg-pink-800 transition duration-200">
<svg class="w-5 h-5 mr-2" 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-4a9 9 0 10-6 0 9 9 0 006 0z" />
</svg>
Search
</button>
</div>
</form>
<div class="mt-6 bg-gray-100 dark:bg-gray-900 p-4 rounded-lg border border-gray-300 dark:border-gray-600">
<h3 class="text-gray-700 dark:text-white mb-2">Featured Users</h3>
<div class="flex items-center space-x-3">
<img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600" />
<span class="text-gray-700 dark:text-white">User1</span>
</div>
<div class="flex items-center space-x-3 mt-2">
<img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600" />
<span class="text-gray-700 dark:text-white">User2</span>
</div>
<div class="flex items-center space-x-3 mt-2">
<img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600" />
<span class="text-gray-700 dark:text-white">User3</span>
</div>
</div>
</div>Componentes relacionados
Cuadro de búsqueda brutalista
Un componente de cuadro de búsqueda brutalista con colores vibrantes y soporte para temas oscuros.
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.
Industrial_Food_Search_Box
Un componente de cuadro de búsqueda de estilo industrial receptivo y de alto contraste para sitios web de alimentos/restaurantes, con elementos expuestos, compatibilidad con modo oscuro y complejidad moderada.