Dashboard_Weather_Climate_Swiss
A complex, responsive weather and climate dashboard component inspired by Swiss/International Typography, using earth tones and supporting dark mode. Features multiple data points like current weather, forecast, air quality, and climate trends.
HTML Code
<div class="min-h-screen bg-stone-100 text-stone-800 dark:bg-stone-900 dark:text-stone-200 p-4 sm:p-6 lg:p-8 font-sans transition-colors duration-300">
<header class="mb-8 sm:mb-10 lg:mb-12">
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-stone-900 dark:text-stone-100 tracking-tight mb-2">
Climate Dashboard
</h1>
<p class="text-lg sm:text-xl text-stone-600 dark:text-stone-400">Comprehensive Weather & Climate Insights</p>
</header>
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 sm:gap-8">
<!-- Current Weather Card -->
<section class="md:col-span-2 lg:col-span-2 p-6 rounded-xl bg-stone-50 dark:bg-stone-800 shadow-lg flex flex-col justify-between overflow-hidden relative">
<div class="absolute top-0 left-0 w-full h-full bg-cover bg-center opacity-10 dark:opacity-5" style="background-image: url('https://picsum.photos/seed/weather_current/1200/800');"></div>
<div class="relative z-10">
<h2 class="text-2xl sm:text-3xl font-semibold text-stone-900 dark:text-stone-100 mb-4">Current Conditions</h2>
<div class="flex items-center justify-between flex-wrap gap-4 mb-6">
<div class="flex items-center gap-4">
<img src="https://openweathermap.org/img/wn/04d.png" alt="Cloudy" class="w-16 h-16 sm:w-20 sm:h-20">
<div>
<p class="text-5xl sm:text-6xl font-bold text-stone-900 dark:text-stone-100">22°C</p>
<p class="text-xl text-stone-700 dark:text-stone-300">Partly Cloudy</p>
</div>
</div>
<div class="text-right">
<p class="text-lg text-stone-700 dark:text-stone-300"><span class="font-medium">Humidity:</span> 65%</p>
<p class="text-lg text-stone-700 dark:text-stone-300"><span class="font-medium">Wind:</span> 12 km/h NE</p>
<p class="text-lg text-stone-700 dark:text-stone-300"><span class="font-medium">Pressure:</span> 1012 hPa</p>
</div>
</div>
<p class="text-md text-stone-600 dark:text-stone-400">Updated: Just now</p>
<p class="mt-2 text-md font-medium text-stone-700 dark:text-stone-300">Location: Zurich, Switzerland</p>
</div>
</section>
<!-- 5-Day Forecast Card -->
<section class="md:col-span-1 lg:col-span-2 p-6 rounded-xl bg-stone-50 dark:bg-stone-800 shadow-lg overflow-hidden">
<h2 class="text-2xl sm:text-3xl font-semibold text-stone-900 dark:text-stone-100 mb-4">5-Day Forecast</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-5 gap-4">
<!-- Day 1 -->
<div class="flex flex-col items-center p-3 rounded-lg bg-stone-100 dark:bg-stone-700">
<p class="font-medium text-stone-800 dark:text-stone-200">Today</p>
<img src="https://openweathermap.org/img/wn/04d.png" alt="Clouds" class="w-10 h-10">
<p class="text-stone-700 dark:text-stone-300">24° / 15°</p>
</div>
<!-- Day 2 -->
<div class="flex flex-col items-center p-3 rounded-lg bg-stone-100 dark:bg-stone-700">
<p class="font-medium text-stone-800 dark:text-stone-200">Tomorrow</p>
<img src="https://openweathermap.org/img/wn/01d.png" alt="Sun" class="w-10 h-10">
<p class="text-stone-700 dark:text-stone-300">26° / 16°</p>
</div>
<!-- Day 3 -->
<div class="flex flex-col items-center p-3 rounded-lg bg-stone-100 dark:bg-stone-700">
<p class="font-medium text-stone-800 dark:text-stone-200">Thu</p>
<img src="https://openweathermap.org/img/wn/10d.png" alt="Rain" class="w-10 h-10">
<p class="text-stone-700 dark:text-stone-300">20° / 13°</p>
</div>
<!-- Day 4 -->
<div class="flex flex-col items-center p-3 rounded-lg bg-stone-100 dark:bg-stone-700">
<p class="font-medium text-stone-800 dark:text-stone-200">Fri</p>
<img src="https://openweathermap.org/img/wn/03d.png" alt="Partly Clouds" class="w-10 h-10">
<p class="text-stone-700 dark:text-stone-300">21° / 14°</p>
</div>
<!-- Day 5 -->
<div class="flex flex-col items-center p-3 rounded-lg bg-stone-100 dark:bg-stone-700">
<p class="font-medium text-stone-800 dark:text-stone-200">Sat</p>
<img src="https://openweathermap.org/img/wn/02d.png" alt="Few Clouds" class="w-10 h-10">
<p class="text-stone-700 dark:text-stone-300">23° / 15°</p>
</div>
</div>
</section>
<!-- Climate Trends Card -->
<section class="md:col-span-1 p-6 rounded-xl bg-stone-50 dark:bg-stone-800 shadow-lg">
<h2 class="text-2xl sm:text-3xl font-semibold text-stone-900 dark:text-stone-100 mb-4">Climate Trends</h2>
<div class="space-y-4">
<div>
<p class="text-lg font-medium text-stone-800 dark:text-stone-200 mb-1">Average Temperature</p>
<div class="w-full bg-stone-200 dark:bg-stone-700 rounded-full h-2.5">
<div class="bg-amber-600 h-2.5 rounded-full" style="width: 70%;"></div>
</div>
<p class="text-sm text-stone-600 dark:text-stone-400 mt-1">+0.8°C vs. Historical Average</p>
</div>
<div>
<p class="text-lg font-medium text-stone-800 dark:text-stone-200 mb-1">Precipitation Anomaly</p>
<div class="w-full bg-stone-200 dark:bg-stone-700 rounded-full h-2.5">
<div class="bg-blue-600 h-2.5 rounded-full" style="width: 60%;"></div>
</div>
<p class="text-sm text-stone-600 dark:text-stone-400 mt-1">-15% vs. Historical Average</p>
</div>
<div>
<p class="text-lg font-medium text-stone-800 dark:text-stone-200 mb-1">Extreme Weather Events</p>
<div class="w-full bg-stone-200 dark:bg-stone-700 rounded-full h-2.5">
<div class="bg-red-600 h-2.5 rounded-full" style="width: 40%;"></div>
</div>
<p class="text-sm text-stone-600 dark:text-stone-400 mt-1">+5% Increase Annually</p>
</div>
</div>
<button class="mt-6 w-full py-2 px-4 bg-lime-700 hover:bg-lime-800 dark:bg-lime-600 dark:hover:bg-lime-700 text-white font-medium rounded-lg transition-colors">
View Full Report
</button>
</section>
<!-- Air Quality Index Card -->
<section class="md:col-span-1 p-6 rounded-xl bg-stone-50 dark:bg-stone-800 shadow-lg flex flex-col">
<h2 class="text-2xl sm:text-3xl font-semibold text-stone-900 dark:text-stone-100 mb-4">Air Quality Index (AQI)</h2>
<div class="flex items-center justify-between mb-4 flex-grow">
<div class="text-center flex-1">
<p class="text-5xl font-bold text-emerald-600 dark:text-emerald-400">45</p>
<p class="text-lg text-emerald-700 dark:text-emerald-300">Good</p>
</div>
<div class="text-left flex-1 pl-4 border-l border-stone-200 dark:border-stone-700">
<p class="text-md text-stone-700 dark:text-stone-300"><span class="font-medium">PM2.5:</span> 12 µg/m³</p>
<p class="text-md text-stone-700 dark:text-stone-300"><span class="font-medium">Ozone:</span> 35 ppb</p>
<p class="text-md text-stone-700 dark:text-stone-300"><span class="font-medium">NO2:</span> 5 ppb</p>
</div>
</div>
<p class="text-sm text-stone-600 dark:text-stone-400 text-center mt-2">Data from local monitoring station</p>
</section>
<!-- Global Anomalies Card -->
<section class="md:col-span-3 lg:col-span-2 p-6 rounded-xl bg-stone-50 dark:bg-stone-800 shadow-lg">
<h2 class="text-2xl sm:text-3xl font-semibold text-stone-900 dark:text-stone-100 mb-4">Global Anomalies & Alerts</h2>
<ul class="space-y-4">
<li class="flex items-start gap-3">
<span class="text-red-500 text-2xl">⚠</span>
<div>
<p class="font-medium text-stone-800 dark:text-stone-200">Heatwave warning for Southern Europe</p>
<p class="text-sm text-stone-600 dark:text-stone-400">Temperatures expected to exceed 40°C for next 7 days.</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-blue-500 text-2xl">ℹ</span>
<div>
<p class="font-medium text-stone-800 dark:text-stone-200">Increased Arctic ice melt observed</p>
<p class="text-sm text-stone-600 dark:text-stone-400">Satellite data shows record low sea ice extent for the season.</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-yellow-500 text-2xl">⛑</span>
<div>
<p class="font-medium text-stone-800 dark:text-stone-200">Pacific Ocean SST trending towards El Niño</p>
<p class="text-sm text-stone-600 dark:text-stone-400">Potential for altered global weather patterns in coming months.</p>
</div>
</li>
</ul>
</section>
</div>
<footer class="mt-10 pt-6 border-t border-stone-300 dark:border-stone-700 text-center text-stone-600 dark:text-stone-400 text-sm">
<p>© 2023 Climate Insights. All rights reserved.</p>
</footer>
</div>Related Components
Dashboards Component
A complex dashboards component designed for dark mode with a monochromatic color scheme for business/corporate use. It features rich interactive elements and is responsive.
Luxury/Premium Marketplace Dashboard Component
A complex, responsive dashboard component for a multi-vendor marketplace with a luxury/premium design style. Features professional corporate blue color scheme, sophisticated typography, and dark mode support. Includes sections for overview, recent sales, top products, and quick statistics.
Neumorphic_Forum_Dashboard
A simple, responsive neumorphic dashboard component with a forest/green color palette, designed for forum and community platforms, and includes dark mode support.