구성 요소 진행 표시기 Memphis_Weather_Progress_Indicator

Memphis_Weather_Progress_Indicator

멤피스 디자인 스타일의 날씨 진행 표시기 구성 요소로, 기후 데이터를 표시하는 데 적합한 밝은 액센트 색상의 대담한 흑백을 특징으로 합니다. 반응형 디자인과 다크 모드 지원이 포함됩니다.

미리 보기

HTML 코드

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

관련 구성 요소

사이버펑크 농업 진행 지표

농업 또는 농업 웹사이트를 위한 미래지향적인 사이버펑크 테마의 진행 지표 세트로, 따뜻한 일몰 톤을 특징으로 합니다. 다크 모드 지원으로 반응형.

열다

Progress Indicators 구성 요소

이것은 반응형 효과와 어두운 테마를 지원하는 Tailwind CSS를 사용하는 Material Design 스타일의 진행률 표시기 구성 요소입니다.

열다

Progress Indicators 구성 요소

사탕/달콤한 색상을 특징으로 하는 마켓플레이스에 대한 종이/인쇄에서 영감을 받은 진행 표시기. 여러 단계, 반응형 레이아웃 및 다크 모드 지원을 갖춘 복잡한 디자인.

열다