Componente de cuadro de búsqueda
Componente de cuadro de búsqueda con interfaz de usuario de modo oscuro, combinación de colores monocromática y complejidad moderada para redes sociales mediante Tailwind CSS. Diseño responsivo con soporte para temas oscuros.
Código HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-md w-full space-y-8">
<div>
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
Search Your Friends
</h2>
</div>
<div class="mt-8 relative">
<input type="text" placeholder="Search..." class="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md leading-5 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500" 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>
</div>
<div class="bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-md mt-4">
<ul class="divide-y divide-gray-200 dark:divide-gray-700">
<li class="px-4 py-4 sm:px-6 flex items-center space-x-3">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-gray-900 dark:text-white truncate">John Doe</p>
<p class="text-sm text-gray-500 dark:text-gray-400 truncate">@johndoe</p>
</div>
</li>
<li class="px-4 py-4 sm:px-6 flex items-center space-x-3">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-gray-900 dark:text-white truncate">Jane Smith</p>
<p class="text-sm text-gray-500 dark:text-gray-400 truncate">@janesmith</p>
</div>
</li>
<li class="px-4 py-4 sm:px-6 flex items-center space-x-3">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-gray-900 dark:text-white truncate">Peter Jones</p>
<p class="text-sm text-gray-500 dark:text-gray-400 truncate">@peterj</p>
</div>
</li>
</ul>
</div>
</div>
</div>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.
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.
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.