Componente de cuadro de búsqueda de juegos
Un componente de cuadro de búsqueda simple y receptivo para sitios web de juegos, inspirado en los principios de diseño de Bauhaus con una paleta de colores bosque/verde y compatibilidad con el modo oscuro.
Código HTML
<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-lime-50 to-emerald-100 dark:from-stone-900 dark:to-green-950 min-h-screen flex items-center justify-center font-sans tracking-wide">
<div class="w-full max-w-lg bg-green-50 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform skew-y-1 sm:skew-y-0 transition-transform duration-300 ease-in-out border-4 border-green-700 dark:border-green-600">
<div class="p-4 sm:p-6 lg:p-8 bg-green-700 dark:bg-green-800 flex items-center justify-center relative">
<h2 class="text-xl sm:text-2xl lg:text-3xl font-bold text-yellow-300 uppercase transform -skew-y-3 dark:text-lime-300 tracking-wider relative z-10">
Find Your Game
</h2>
<div class="absolute inset-0 bg-gradient-to-r from-green-800 to-emerald-900 opacity-70 dark:opacity-60 z-0"></div>
</div>
<div class="p-6 sm:p-8 lg:p-10">
<form action="#" method="GET" class="relative">
<label for="search-game" class="sr-only">Search for a game</label>
<div class="relative flex items-center bg-green-100 dark:bg-stone-700 rounded-md border-2 border-green-400 dark:border-green-600 focus-within:border-emerald-600 dark:focus-within:border-lime-500 transition-colors duration-300">
<input
type="search"
id="search-game"
name="q"
placeholder="Search game titles..."
aria-label="Search for a game"
class="w-full py-3 pl-4 pr-12 text-lg text-green-900 dark:text-lime-50 placeholder-green-600 dark:placeholder-green-400 bg-transparent outline-none focus:ring-0 rounded-l-md"
tabindex="0"
/>
<button
type="submit"
aria-label="Perform search"
class="absolute right-0 top-0 h-full w-12 flex items-center justify-center bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-600 text-white rounded-r-md transition-colors duration-300 transform -skew-x-6 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-green-50 dark:focus:ring-offset-stone-800"
tabindex="0"
>
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</button>
</div>
</form>
</div>
<div class="relative bg-gradient-to-t from-green-700 to-green-600 dark:from-green-900 dark:to-green-800 p-2 sm:p-3 lg:p-4 text-center transform -skew-y-1 sm:skew-y-0 transition-transform duration-300 ease-in-out">
<p class="text-sm text-yellow-200 dark:text-lime-200 uppercase font-semibold relative z-10 tracking-widest">
Press Enter to Play
</p>
<div class="absolute inset-0 bg-green-800 opacity-50 dark:opacity-40 z-0"></div>
</div>
</div>
</div>Componentes relacionados
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.
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 del cuadro de búsqueda de glassmorphism
Un componente de cuadro de búsqueda moderno con un efecto de vidrio esmerilado (glassmorphism) que usa colores pastel. El componente es simple pero elegante, diseñado para sitios web comerciales profesionales. Cuenta con un fondo translúcido con sutiles efectos de desenfoque, diseño receptivo y compatibilidad con el modo oscuro. El cuadro de búsqueda incluye un icono de búsqueda y un campo de entrada limpio que se adapta bien a los entornos corporativos.