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.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="relative w-full max-w-md">
<input type="text" class="p-4 pl-10 pr-4 text-gray-900 bg-white border border-gray-300 rounded-lg shadow-lg dark:bg-gray-800 dark:text-white dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 placeholder-gray-400" placeholder="Search..." />
<svg class="absolute left-3 top-3 w-5 h-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm4 0a8 8 0 1 0 0 16 8 8 0 0 0 0-16z" />
</svg>
</div>
</div>Componentes relacionados
Componente de cuadro de búsqueda
Un componente de cuadro de búsqueda diseñado con un estilo esqueuomórfico para imitar un cuadro de búsqueda del mundo real, utilizando un esquema de color triádico, adecuado para una cartera y responsivo con soporte de modo oscuro.
Componente de cuadro de búsqueda
Un componente de cuadro de búsqueda receptivo diseñado en un estilo brutalista con soporte para temas oscuros utilizando Tailwind CSS.
Componente de cuadro de búsqueda
Un componente de cuadro de búsqueda receptivo diseñado con estilo glassmorphism, compatible con el modo oscuro y adaptado para aplicaciones de comercio electrónico.