Composant de la boîte de recherche de jeux
Un composant de champ de recherche réactif et simple pour les sites Web de jeux, inspiré des principes de conception du Bauhaus avec une palette de couleurs forêt/vert et la prise en charge du mode sombre.
HTML Code
<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>Composants associés
Composant de zone de recherche
Un composant de champ de recherche réactif avec un design brutaliste, utilisant une palette de couleurs complémentaires adaptée aux sites Web d’entreprise.
Composant de zone de recherche
Un composant de champ de recherche réactif avec un design minimaliste/plat, une palette de couleurs vives et des interactions complexes, adapté aux sites Web d’entreprise. Il prend en charge le mode sombre et est construit avec Tailwind CSS.
Boîte de recherche skeuomorphe
Un composant de champ de recherche avec un design skeuomorphe qui imite les éléments du monde réel, avec une réactivité et une prise en charge du thème sombre.