Componente de tarjetas meteorológicas de la Bauhaus
Un componente de tarjetas meteorológicas/climáticas simple y receptivo inspirado en los principios de diseño de la Bauhaus, con formas geométricas y un esquema de color triádico. Incluye soporte para modo oscuro.
Código HTML
<div class="p-4 sm:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans tracking-wide">
<div class="container max-w-7xl grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<!-- Today's Weather Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-b-4 border-l-4 border-red-500 dark:border-red-600 transform transition-transform duration-300 hover:scale-[1.02] flex flex-col">
<div class="p-6 flex-grow flex flex-col justify-between">
<div>
<h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white capitalize">Today</h2>
<p class="text-4xl font-extrabold text-blue-600 dark:text-blue-400 mb-4">28°C</p>
<p class="text-lg text-gray-600 dark:text-gray-300 mb-4">Sunny with scattered clouds</p>
</div>
<div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 grid grid-cols-2 gap-2 text-sm text-gray-700 dark:text-gray-400">
<div>
<span class="font-semibold block">Humidity:</span> 65%
</div>
<div>
<span class="font-semibold block">Wind:</span> 12 km/h NE
</div>
<div>
<span class="font-semibold block">UV Index:</span> Low
</div>
<div>
<span class="font-semibold block">Precip:</span> 0%
</div>
</div>
</div>
<div class="px-6 py-3 bg-yellow-500 dark:bg-yellow-600 text-sm font-semibold text-white uppercase text-center">
Current Conditions
</div>
</div>
<!-- Tomorrow's Forecast Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-b-4 border-l-4 border-blue-500 dark:border-blue-600 transform transition-transform duration-300 hover:scale-[1.02] flex flex-col">
<div class="p-6 flex-grow flex flex-col justify-between">
<div>
<h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white capitalize">Tomorrow</h2>
<p class="text-4xl font-extrabold text-red-600 dark:text-red-400 mb-4">25°C</p>
<p class="text-lg text-gray-600 dark:text-gray-300 mb-4">Partly cloudy, chance of showers</p>
</div>
<div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 grid grid-cols-2 gap-2 text-sm text-gray-700 dark:text-gray-400">
<div>
<span class="font-semibold block">Humidity:</span> 78%
</div>
<div>
<span class="font-semibold block">Wind:</span> 15 km/h NW
</div>
<div>
<span class="font-semibold block">UV Index:</span> Moderate
</div>
<div>
<span class="font-semibold block">Precip:</span> 30%
</div>
</div>
</div>
<div class="px-6 py-3 bg-red-500 dark:bg-red-600 text-sm font-semibold text-white uppercase text-center">
Expected Forecast
</div>
</div>
<!-- Day After Tomorrow's Forecast Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-b-4 border-l-4 border-yellow-500 dark:border-yellow-600 transform transition-transform duration-300 hover:scale-[1.02] flex flex-col">
<div class="p-6 flex-grow flex flex-col justify-between">
<div>
<h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white capitalize">Fri, May 24</h2>
<p class="text-4xl font-extrabold text-blue-600 dark:text-blue-400 mb-4">22°C</p>
<p class="text-lg text-gray-600 dark:text-gray-300 mb-4">Mostly cloudy, few showers</p>
</div>
<div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 grid grid-cols-2 gap-2 text-sm text-gray-700 dark:text-gray-400">
<div>
<span class="font-semibold block">Humidity:</span> 85%
</div>
<div>
<span class="font-semibold block">Wind:</span> 10 km/h W
</div>
<div>
<span class="font-semibold block">UV Index:</span> Low
</div>
<div>
<span class="font-semibold block">Precip:</span> 60%
</div>
</div>
</div>
<div class="px-6 py-3 bg-blue-500 dark:bg-blue-600 text-sm font-semibold text-white uppercase text-center">
Long Range Outlook
</div>
</div>
<!-- Climate Data Card (Example with Placeholder Image) -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-b-4 border-l-4 border-green-500 dark:border-green-600 transform transition-transform duration-300 hover:scale-[1.02] flex flex-col">
<img src="https://picsum.photos/400/250?random=1" alt="Climate Data Visualization" class="w-full h-40 object-cover border-b-4 border-green-500 dark:border-green-600 group-hover:scale-105 transition duration-300" loading="lazy">
<div class="p-6 flex-grow flex flex-col justify-between">
<div>
<h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white capitalize">Climate Trends</h2>
<p class="text-lg text-gray-600 dark:text-gray-300 mb-4">Analyzing global temperature shifts</p>
</div>
<div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 text-sm text-gray-700 dark:text-gray-400">
<p class="font-semibold">Average Anomaly:</p>
<p class="mb-2">+0.85°C (past decade)</p>
<p class="font-semibold">CO2 Levels:</p>
<p>420 ppm (rising)</p>
</div>
</div>
<div class="px-6 py-3 bg-green-500 dark:bg-green-600 text-sm font-semibold text-white uppercase text-center">
Environmental Impact
</div>
</div>
</div>
</div>Componentes relacionados
Neon_Glow_Farming_Cards
Un conjunto complejo de tarjetas responsivas para sitios web de agricultura/ganadería, con efectos de neón/resplandor con una combinación de colores cálidos/atardeceres, incluida la compatibilidad con el modo oscuro.
Cartas sociales del modo oscuro
Un componente de tarjeta receptivo diseñado para el modo oscuro con tonos tierra, diseñado para interfaces de redes sociales.
Componente de tarjetas
Un componente de tarjeta de portafolio receptivo con un estilo de diseño brutalista, que utiliza una combinación de colores pastel y una complejidad moderada con funciones interactivas. Esta tarjeta muestra el trabajo o los productos y es compatible con el modo oscuro.