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
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.
Componente de cuadro de búsqueda
Un componente de cuadro de búsqueda complejo de estilo Glassmorphism con un esquema de color análogo, adecuado para un portafolio, con diseño receptivo y soporte de temas oscuros que usa solo HTML y 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.