Memphis_Weather_Progress_Indicator

<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>