Brutalist_Weather_Search_Box
Un composant de champ de recherche complexe, contrasté et brutaliste pour les données météorologiques et climatiques, avec plusieurs éléments de saisie et un design réactif avec prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-8 md:p-12 lg:p-16 min-h-screen bg-gray-100 dark:bg-zinc-950 flex items-start justify-center font-mono">
<div class="w-full max-w-4xl border-4 border-black dark:border-lime-400 bg-white dark:bg-zinc-900 shadow-[10px_10px_0_0_#1a202c] dark:shadow-[10px_10px_0_0_#a3e635] p-6 sm:p-8 md:p-10 transition-all duration-300 ease-in-out">
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-extrabold text-black dark:text-lime-400 uppercase tracking-tighter mb-6 leading-none border-b-4 border-black dark:border-lime-400 pb-2">
Climate Query Interface <span class="text-red-600 dark:text-orange-500">_V1.0</span>
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8 md:gap-10">
<div class="flex flex-col space-y-4">
<label for="location-input" class="block text-lg sm:text-xl font-bold text-black dark:text-lime-400 uppercase">
LOCALE: <span class="text-red-600 dark:text-orange-500">WHERE?</span>
</label>
<input type="text" id="location-input" placeholder="e.g., Tokyo, Japan, New York City, or Latitude,Longitude" class="w-full p-3 sm:p-4 border-4 border-black dark:border-lime-400 bg-yellow-300 dark:bg-zinc-800 text-black dark:text-white placeholder:text-gray-700 dark:placeholder:text-gray-400 focus:outline-none focus:ring-4 focus:ring-red-500 dark:focus:ring-orange-500 text-base sm:text-lg uppercase shadow-[4px_4px_0_0_#1a202c] dark:shadow-[4px_4px_0_0_#a3e635] tracking-wide">
<label for="date-range-start" class="block text-lg sm:text-xl font-bold text-black dark:text-lime-400 uppercase mt-4">
PERIOD: <span class="text-red-600 dark:text-orange-500">WHEN?</span>
</label>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<input type="date" id="date-range-start" class="w-full p-3 sm:p-4 border-4 border-black dark:border-lime-400 bg-fuchsia-300 dark:bg-zinc-800 text-black dark:text-white focus:outline-none focus:ring-4 focus:ring-red-500 dark:focus:ring-orange-500 text-base sm:text-lg uppercase shadow-[4px_4px_0_0_#1a202c] dark:shadow-[4px_4px_0_0_#a3e635]">
<input type="date" id="date-range-end" class="w-full p-3 sm:p-4 border-4 border-black dark:border-lime-400 bg-fuchsia-300 dark:bg-zinc-800 text-black dark:text-white focus:outline-none focus:ring-4 focus:ring-red-500 dark:focus:ring-orange-500 text-base sm:text-lg uppercase shadow-[4px_4px_0_0_#1a202c] dark:shadow-[4px_4px_0_0_#a3e635]">
</div>
</div>
<div class="flex flex-col space-y-4">
<label for="data-type" class="block text-lg sm:text-xl font-bold text-black dark:text-lime-400 uppercase">
METRIC: <span class="text-red-600 dark:text-orange-500">WHAT?</span>
</label>
<select id="data-type" class="w-full p-3 sm:p-4 border-4 border-black dark:border-lime-400 bg-cyan-300 dark:bg-zinc-800 text-black dark:text-white focus:outline-none focus:ring-4 focus:ring-red-500 dark:focus:ring-orange-500 text-base sm:text-lg uppercase shadow-[4px_4px_0_0_#1a202c] dark:shadow-[4px_4px_0_0_#a3e635]">
<option value="temperature" class="text-black dark:text-white bg-cyan-300 dark:bg-zinc-800">Temperature (Avg/Max/Min)</option>
<option value="precipitation" class="text-black dark:text-white bg-cyan-300 dark:bg-zinc-800">Precipitation (mm/in)</option>
<option value="humidity" class="text-black dark:text-white bg-cyan-300 dark:bg-zinc-800">Humidity (%)</option>
<option value="wind-speed" class="text-black dark:text-white bg-cyan-300 dark:bg-zinc-800">Wind Speed (kph/mph)</option>
<option value="uv-index" class="text-black dark:text-white bg-cyan-300 dark:bg-zinc-800">UV Index</option>
<option value="pressure" class="text-black dark:text-white bg-cyan-300 dark:bg-zinc-800">Atmospheric Pressure (hPa)</option>
<option value="air-quality" class="text-black dark:text-white bg-cyan-300 dark:bg-zinc-800">Air Quality (AQI)</option>
</select>
<label for="output-format" class="block text-lg sm:text-xl font-bold text-black dark:text-lime-400 uppercase mt-4">
FORMAT: <span class="text-red-600 dark:text-orange-500">HOW?</span>
</label>
<div class="flex flex-wrap gap-4">
<label class="inline-flex items-center group">
<input type="radio" name="output-format" value="graph" class="form-radio h-6 w-6 text-red-600 dark:text-orange-500 border-4 border-black dark:border-lime-400 bg-white dark:bg-zinc-800 focus:ring-red-500 dark:focus:ring-orange-500 group-hover:bg-red-200 dark:group-hover:bg-zinc-700 transition ease-in-out duration-150">
<span class="ml-2 text-base sm:text-lg text-black dark:text-white uppercase font-bold">Graph</span>
</label>
<label class="inline-flex items-center group">
<input type="radio" name="output-format" value="table" class="form-radio h-6 w-6 text-red-600 dark:text-orange-500 border-4 border-black dark:border-lime-400 bg-white dark:bg-zinc-800 focus:ring-red-500 dark:focus:ring-orange-500 group-hover:bg-red-200 dark:group-hover:bg-zinc-700 transition ease-in-out duration-150" checked>
<span class="ml-2 text-base sm:text-lg text-black dark:text-white uppercase font-bold">Table</span>
</label>
<label class="inline-flex items-center group">
<input type="radio" name="output-format" value="raw" class="form-radio h-6 w-6 text-red-600 dark:text-orange-500 border-4 border-black dark:border-lime-400 bg-white dark:bg-zinc-800 focus:ring-red-500 dark:focus:ring-orange-500 group-hover:bg-red-200 dark:group-hover:bg-zinc-700 transition ease-in-out duration-150">
<span class="ml-2 text-base sm:text-lg text-black dark:text-white uppercase font-bold">Raw JSON</span>
</label>
</div>
</div>
</div>
<button class="mt-8 w-full p-4 sm:p-5 md:p-6 bg-red-600 dark:bg-orange-500 text-white dark:text-black font-extrabold text-xl sm:text-2xl md:text-3xl lg:text-4xl uppercase border-4 border-black dark:border-lime-400 shadow-[6px_6px_0_0_#1a202c] dark:shadow-[6px_6px_0_0_#a3e635] hover:shadow-[0_0_0_0] hover:translate-x-2 hover:translate-y-2 transition-all duration-150 ease-out active:scale-95 tracking-tight">
EXECUTE CLIMATE QUERY
<span class="ml-2 text-yellow-300 dark:text-lime-200">// GO!</span>
</button>
<div class="mt-8 border-t-4 border-black dark:border-lime-400 pt-4 text-center">
<p class="text-sm text-gray-700 dark:text-gray-300 font-bold uppercase">
<span class="text-red-600 dark:text-orange-500">WARNING:</span> Data may contain anomalies. Trust at your own risk. // System v7.8a
</p>
</div>
</div>
</div>Composants associés
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.
Composant de la boîte de recherche Glassmorphism
Un composant de boîte de recherche moderne avec un effet de verre dépoli (glassmorphism) utilisant des couleurs pastel. Le composant est simple mais élégant, conçu pour les sites Web d’entreprise professionnels. Il présente un arrière-plan translucide avec des effets de flou subtils, un design réactif et une prise en charge du mode sombre. La boîte de recherche comprend une icône de recherche et un champ de saisie propre qui s’adapte bien aux environnements d’entreprise.
Composant de zone de recherche
Un composant de champ de recherche minimaliste conçu avec Tailwind CSS, avec des effets réactifs et la prise en charge des thèmes sombres.