Brutalist_Weather_Search_Box
Un componente de cuadro de búsqueda complejo, de alto contraste y estilo brutalista para datos meteorológicos y climáticos, con múltiples elementos de entrada y un diseño receptivo con soporte para modo oscuro.
Código HTML
<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>Componentes relacionados
Componente de cuadro de búsqueda
Un componente de cuadro de búsqueda minimalista diseñado con Tailwind CSS, con efectos responsivos y compatibilidad con temas oscuros.
Componente de cuadro de búsqueda
Un componente de cuadro de búsqueda responsivo diseñado con los principios de Material Design, con estilos CSS de Tailwind y compatibilidad con temas oscuros.
Cuadro de búsqueda de Material Design
Un componente de cuadro de búsqueda inspirado en los principios de Material Design, creado con Tailwind CSS. Cuenta con un comportamiento responsivo que se adapta al ancho del contenedor, retroalimentación visual a través de transiciones de sombras de desplazamiento y enfoque (efectos de profundidad) y soporte integral de temas oscuros. El componente incluye un icono de búsqueda principal y garantiza una estética limpia y moderna. Implementación solo de CSS. Ideal para incrustar en varios diseños debido a su naturaleza 'w-full'. Para la accesibilidad, asegúrese de emparejar el elemento 'input' con un '<label>' correspondiente o proporcione una 'aria-label' descriptiva.