Memphis_Weather_Progress_Indicator
Un composant d’indicateur de progression météorologique avec un style de design Memphis, avec un noir et blanc audacieux avec une couleur d’accent vive, adapté à l’affichage des données climatiques. Il comprend un design réactif et la prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-8 md:p-12 min-h-screen bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-50 flex items-center justify-center font-sans">
<div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border-4 border-gray-900 dark:border-gray-50 transform skew-y-2 lg:skew-y-0 lg:skew-x-2 transition-all duration-300">
<div class="relative p-6 sm:p-8 md:p-10 lg:p-12 grid grid-cols-1 md:grid-cols-2 gap-8 text-center md:text-left">
<!-- Accent Background Shape -->
<div class="absolute inset-0 bg-fuchsia-500 dark:bg-teal-500 opacity-80 z-0 transform -rotate-3 translate-x-2 translate-y-2 rounded-lg"></div>
<div class="absolute inset-0 bg-fuchsia-500 dark:bg-teal-500 opacity-80 z-0 transform rotate-2 translate-x-4 translate-y-4 rounded-lg"></div>
<div class="relative z-10 flex flex-col items-center md:items-start justify-center">
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-extrabold mb-4 uppercase text-gray-900 dark:text-gray-50 leading-tight tracking-wider">
Climate Progress
</h2>
<p class="text-sm sm:text-base md:text-lg text-gray-700 dark:text-gray-300 mb-6 max-w-sm">
Tracking key climate indicators for a sustainable future. Data insights at a glance.
</p>
<span class="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-black text-fuchsia-600 dark:text-teal-400 mb-4 transform -rotate-6">
⚡
</span>
</div>
<div class="relative z-10 flex flex-col items-center justify-center gap-6">
<!-- Progress Bar 1: Temperature Anomaly -->
<div class="w-full">
<div class="flex items-center justify-between mb-2">
<p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Temperature Anomaly</p>
<span class="text-xl font-bold text-fuchsia-600 dark:text-teal-400">+1.2°C</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 sm:h-5 md:h-6 overflow-hidden relative border-2 border-gray-900 dark:border-gray-50">
<div class="h-full bg-fuchsia-500 dark:bg-teal-500 rounded-full transition-all duration-700 ease-out" style="width: 70%;">
<div class="absolute inset-0 bg-fuchsia-600 dark:bg-teal-600 opacity-30 transform -skew-x-12" style="width: 70%;"></div>
</div>
</div>
<p class="text-xs text-gray-600 dark:text-gray-400 mt-1 text-right">70% of limit</p>
</div>
<!-- Progress Bar 2: Sea Level Rise -->
<div class="w-full">
<div class="flex items-center justify-between mb-2">
<p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Sea Level Rise</p>
<span class="text-xl font-bold text-fuchsia-600 dark:text-teal-400">+0.8 cm/year</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 sm:h-5 md:h-6 overflow-hidden relative border-2 border-gray-900 dark:border-gray-50">
<div class="h-full bg-fuchsia-500 dark:bg-teal-500 rounded-full transition-all duration-700 ease-out" style="width: 45%;">
<div class="absolute inset-0 bg-fuchsia-600 dark:bg-teal-600 opacity-30 transform -skew-x-12" style="width: 45%;"></div>
</div>
</div>
<p class="text-xs text-gray-600 dark:text-gray-400 mt-1 text-right">45% of forecast</p>
</div>
<!-- Progress Bar 3: CO2 Concentration -->
<div class="w-full">
<div class="flex items-center justify-between mb-2">
<p class="text-lg font-semibold text-gray-800 dark:text-gray-200">CO2 Concentration</p>
<span class="text-xl font-bold text-fuchsia-600 dark:text-teal-400">419 ppm</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 sm:h-5 md:h-6 overflow-hidden relative border-2 border-gray-900 dark:border-gray-50">
<div class="h-full bg-fuchsia-500 dark:bg-teal-500 rounded-full transition-all duration-700 ease-out" style="width: 85%;">
<div class="absolute inset-0 bg-fuchsia-600 dark:bg-teal-600 opacity-30 transform -skew-x-12" style="width: 85%;"></div>
</div>
</div>
<p class="text-xs text-gray-600 dark:text-gray-400 mt-1 text-right">85% above pre-industrial</p>
</div>
</div>
</div>
<!-- Decorative Bottom Bar -->
<div class="relative h-12 sm:h-16 md:h-20 bg-gray-900 dark:bg-gray-50 flex items-center justify-center border-t-4 border-gray-50 dark:border-gray-900 transform -skew-y-2 lg:skew-y-0 lg:skew-x-2 transition-all duration-300">
<div class="absolute inset-0 bg-fuchsia-700 dark:bg-teal-700 opacity-80 z-0 transform rotate-3 scale-x-105"></div>
<span class="relative z-10 text-xl sm:text-2xl font-bold text-white dark:text-gray-900 uppercase tracking-widest">Climate Insights</span>
</div>
</div>
</div>Composants associés
Volet Indicateurs de progrès
Un composant d’indicateur de progression de style luxe/premium conçu pour les applications de sport/fitness, avec des tons de bijoux, une typographie sophistiquée et une réactivité totale avec prise en charge du mode sombre.
Volet Indicateurs de progrès
Un composant complexe et monochrome sur le thème des réseaux sociaux avec une interface utilisateur en mode sombre, avec plusieurs barres de progression, un flux d’activité et des avatars d’utilisateurs.
Volet Indicateurs de progrès industriel
Un composant complexe et contrasté d’indicateurs de progression avec une esthétique de design industriel, adapté aux sites Web d’entreprise. Comprend plusieurs barres de progression, une section d’état détaillée et des textures de matières premières, entièrement réactives avec la prise en charge du mode sombre.