Search Components

Progress Indicators

Visual indicators of ongoing processes

Progress Indicators Component

A luxury/premium style progress indicator component designed for sports/fitness applications, featuring jewel tones, sophisticated typography, and full responsiveness with dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-stone-900 dark:to-stone-950 min-h-screen flex items-center justify-center font-sans">

  <div class="w-full max-w-4xl bg-white dark:bg-stone-800 shadow-xl rounded-2xl p-6 sm:p-8 lg:p-10 border border-gray-200 dark:border-stone-700 transform hover:scale-[1.02] transition-all duration-300 ease-in-out">
    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-emerald-700 dark:text-emerald-400 mb-6 sm:mb-8 text-center tracking-tight leading-tight">
      Athlete Performance Overview
    </h2>
    <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-8 sm:mb-10 text-center max-w-2xl mx-auto opacity-90">
      Track key metrics and visualize progress towards your fitness goals with elegant precision.
    </p>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-y-10 gap-x-8 sm:gap-x-12 lg:gap-x-16">

      <!-- Metric 1: Endurance Progress -->
      <div class="flex flex-col items-center">
        <div class="relative w-40 h-40 sm:w-48 sm:h-48 flex items-center justify-center mb-4">
          <svg class="w-full h-full transform -rotate-90" viewBox="0 0 120 120">
            <circle class="text-gray-200 dark:text-stone-700" stroke-width="12" stroke="currentColor" fill="transparent" r="54" cx="60" cy="60"></circle>
            <circle class="text-sapphire-600 dark:text-sapphire-400 transition-all duration-700 ease-out" stroke-width="12" stroke-dasharray="339.29" stroke-dashoffset="calc(339.29 - (339.29 * 0.75))" stroke-linecap="round" stroke="currentColor" fill="transparent" r="54" cx="60" cy="60"></circle>
          </svg>
          <span class="absolute text-4xl font-bold text-sapphire-700 dark:text-sapphire-300">75%</span>
        </div>
        <h3 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Endurance</h3>
        <p class="text-gray-600 dark:text-gray-400 text-center max-w-xs">Achieved 75% of your aerobic fitness target.</p>
      </div>

      <!-- Metric 2: Strength Level -->
      <div class="flex flex-col items-center">
        <div class="relative w-40 h-40 sm:w-48 sm:h-48 flex items-center justify-center mb-4">
          <svg class="w-full h-full transform -rotate-90" viewBox="0 0 120 120">
            <circle class="text-gray-200 dark:text-stone-700" stroke-width="12" stroke="currentColor" fill="transparent" r="54" cx="60" cy="60"></circle>
            <circle class="text-ruby-600 dark:text-ruby-400 transition-all duration-700 ease-out" stroke-width="12" stroke-dasharray="339.29" stroke-dashoffset="calc(339.29 - (339.29 * 0.88))" stroke-linecap="round" stroke="currentColor" fill="transparent" r="54" cx="60" cy="60"></circle>
          </svg>
          <span class="absolute text-4xl font-bold text-ruby-700 dark:text-ruby-300">88%</span>
        </div>
        <h3 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Strength</h3>
        <p class="text-gray-600 dark:text-gray-400 text-center max-w-xs">Reached 88% of your personal strength record.</p>
      </div>

      <!-- Metric 3: Recovery Status -->
      <div class="col-span-1 md:col-span-2 flex flex-col items-center">
        <h3 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Recovery Score</h3>
        <div class="w-full max-w-sm bg-gray-200 dark:bg-stone-700 rounded-full h-8 sm:h-10 mb-4 overflow-hidden shadow-inner">
          <div class="bg-emerald-500 dark:bg-emerald-300 h-full rounded-full transition-all duration-700 ease-out flex items-center justify-end pr-3"
            style="width: 92%;">
            <span class="text-white dark:text-stone-900 text-sm font-semibold">92%</span>
          </div>
        </div>
        <p class="text-gray-600 dark:text-gray-400 text-center max-w-lg">Excellent recovery; ready for optimal performance.</p>
      </div>

      <!-- Metric 4: Goal Completion -->
      <div class="col-span-1 md:col-span-2 flex flex-col items-center">
        <h3 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Overall Goal Completion</h3>
        <div class="flex items-center space-x-4 mb-4">
          <div class="relative w-28 h-28 sm:w-32 sm:h-32">
            <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="Athlete Avatar" class="w-full h-full rounded-full object-cover border-4 border-emerald-500 dark:border-emerald-300 shadow-lg">
            <span class="absolute bottom-0 right-0 bg-emerald-500 dark:bg-emerald-300 rounded-full p-1 border-2 border-white dark:border-stone-800">
              <svg class="w-6 h-6 text-white dark:text-stone-900 icon-check" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            </span>
          </div>
          <div class="flex-1">
            <p class="text-3xl sm:text-4xl font-extrabold text-ruby-600 dark:text-ruby-400">+
              <span class="counter" data-count="12">12</span> Workouts This Week
            </p>
            <p class="text-lg text-gray-600 dark:text-gray-400">Exceeding weekly target of 10.</p>
          </div>
        </div>
        <div class="w-full flex justify-center mt-6">
          <button class="px-8 py-3 bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 text-white font-bold rounded-full text-lg shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-emerald-400 dark:focus:ring-emerald-700 active:scale-95">
            View Detailed Report
          </button>
        </div>
      </div>

    </div>
  </div>

</div>

<style>
  /* Custom properties for jewel tones */
  .text-sapphire-600 { color: #2B6CB0; } /* Tailwind blue-700 for example */
  .dark\:text-sapphire-400 { color: #63B3ED; } /* Tailwind blue-400 */
  .text-ruby-600 { color: #E53E3E; } /* Tailwind red-600 */
  .dark\:text-ruby-400 { color: #FC8181; } /* Tailwind red-400 */
  .text-emerald-700 { color: #047857; } /* Tailwind emerald-700 */
  .dark\:text-emerald-400 { color: #34D399; } /* Tailwind emerald-400 */
  .bg-emerald-500 { background-color: #10B981; } /* Tailwind emerald-500 */
  .dark\:bg-emerald-300 { background-color: #6EE7B7; } /* Tailwind emerald-300 */

  /* If you want specific custom jewel tones */
  /*
  .text-sapphire-600 { color: #0F4C81; }
  .dark\:text-sapphire-400 { color: #5B9BD5; }
  .text-ruby-600 { color: #9C1943; }
  .dark\:text-ruby-400 { color: #E03B87; }
  .text-emerald-700 { color: #007A4D; }
  .dark\:text-emerald-400 { color: #3DCC91; }
  .bg-emerald-500 { background-color: #00B06B; }
  .dark\:bg-emerald-300 { background-color: #72E0AF; }
  */

  /* Animation for circular progress */
  .transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 700ms;
  }

  /* Counter animation (requires JS for actual counting, but static HTML shows final state) */
  /* For dynamic effect, a small JS snippet would be needed outside the scope of this task. */
  /* Example of how a JS counter might be initialized: */
  /*
  document.querySelectorAll('.counter').forEach(counter => {
    const updateCount = () => {
      const target = +counter.getAttribute('data-count');
      const count = +counter.innerText;

      const increment = target / 200;

      if (count < target) {
        counter.innerText = Math.ceil(count + increment);
        setTimeout(updateCount, 1);
      } else {
        counter.innerText = target;
      }
    };
    updateCount();
  });
  */
</style>

Progress Indicators Component

A simple, responsive progress indicator component with neon/glow effects and jewel tones, suitable for consulting/service websites. Includes dark mode support.

Open Preview

                <div class="font-sans bg-stone-950 text-emerald-300 min-h-screen p-8 sm:p-12 lg:p-16 flex items-center justify-center dark:bg-gray-950 dark:text-emerald-300">
  <div class="w-full max-w-4xl">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-10 sm:mb-14 relative group leading-tight">
      <span class="bg-clip-text text-transparent bg-gradient-to-r from-emerald-400 via-emerald-200 to-emerald-400 drop-shadow-lg inline-block relative">
        Our Consulting Process
        <span class="absolute inset-x-0 bottom-[-5px] h-[3px] bg-gradient-to-r from-emerald-500 via-emerald-300 to-emerald-500 blur-sm opacity-75 animate-pulse"></span>
      </span>
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
      <!-- Step 1 -->
      <div class="flex flex-col items-center text-center p-6 rounded-lg border border-emerald-700 bg-gradient-to-br from-stone-900 to-stone-950 shadow-md transition-all duration-300 hover:shadow-emerald-500/30 hover:scale-[1.02] relative group overflow-hidden">
        <span class="absolute inset-0 bg-gradient-to-br from-emerald-900/0 via-emerald-800/20 to-emerald-900/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-lg pointer-events-none"></span>
        <div class="relative z-10">
          <div class="w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-br from-emerald-600 to-emerald-800 rounded-full flex items-center justify-center mb-4 sm:mb-6 shadow-lg shadow-emerald-500/40 relative">
            <p class="text-2xl sm:text-3xl font-bold text-white drop-shadow-md">1</p>
             <span class="absolute inset-0 w-full h-full bg-emerald-400 rounded-full blur-xl opacity-30 animate-pulse"></span>
          </div>
          <h3 class="text-xl sm:text-2xl font-semibold mb-2 text-emerald-200 drop-shadow-sm">Discovery</h3>
          <p class="text-sm sm:text-base text-emerald-400 opacity-80 leading-relaxed">Understanding your unique needs and challenges through detailed consultation.</p>
        </div>
      </div>

      <!-- Step 2 -->
      <div class="flex flex-col items-center text-center p-6 rounded-lg border border-emerald-700 bg-gradient-to-br from-stone-900 to-stone-950 shadow-md transition-all duration-300 hover:shadow-emerald-500/30 hover:scale-[1.02] relative group overflow-hidden">
        <span class="absolute inset-0 bg-gradient-to-br from-emerald-900/0 via-emerald-800/20 to-emerald-900/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-lg pointer-events-none"></span>
        <div class="relative z-10">
          <div class="w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-br from-emerald-600 to-emerald-800 rounded-full flex items-center justify-center mb-4 sm:mb-6 shadow-lg shadow-emerald-500/40 relative">
            <p class="text-2xl sm:text-3xl font-bold text-white drop-shadow-md">2</p>
             <span class="absolute inset-0 w-full h-full bg-emerald-400 rounded-full blur-xl opacity-30 animate-pulse"></span>
          </div>
          <h3 class="text-xl sm:text-2xl font-semibold mb-2 text-emerald-200 drop-shadow-sm">Strategy</h3>
          <p class="text-sm sm:text-base text-emerald-400 opacity-80 leading-relaxed">Crafting tailored strategies and actionable plans specific to your objectives.</p>
        </div>
      </div>

      <!-- Step 3 -->
      <div class="flex flex-col items-center text-center p-6 rounded-lg border border-emerald-700 bg-gradient-to-br from-stone-900 to-stone-950 shadow-md transition-all duration-300 hover:shadow-emerald-500/30 hover:scale-[1.02] relative group overflow-hidden">
        <span class="absolute inset-0 bg-gradient-to-br from-emerald-900/0 via-emerald-800/20 to-emerald-900/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-lg pointer-events-none"></span>
        <div class="relative z-10">
          <div class="w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-br from-emerald-600 to-emerald-800 rounded-full flex items-center justify-center mb-4 sm:mb-6 shadow-lg shadow-emerald-500/40 relative">
            <p class="text-2xl sm:text-3xl font-bold text-white drop-shadow-md">3</p>
             <span class="absolute inset-0 w-full h-full bg-emerald-400 rounded-full blur-xl opacity-30 animate-pulse"></span>
          </div>
          <h3 class="text-xl sm:text-2xl font-semibold mb-2 text-emerald-200 drop-shadow-sm">Execution</h3>
          <p class="text-sm sm:text-base text-emerald-400 opacity-80 leading-relaxed">Implementing solutions and providing hands-on support for successful deployment.</p>
        </div>
      </div>

      <!-- Step 4 -->
      <div class="flex flex-col items-center text-center p-6 rounded-lg border border-emerald-700 bg-gradient-to-br from-stone-900 to-stone-950 shadow-md transition-all duration-300 hover:shadow-emerald-500/30 hover:scale-[1.02] relative group overflow-hidden">
        <span class="absolute inset-0 bg-gradient-to-br from-emerald-900/0 via-emerald-800/20 to-emerald-900/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-lg pointer-events-none"></span>
        <div class="relative z-10">
          <div class="w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-br from-emerald-600 to-emerald-800 rounded-full flex items-center justify-center mb-4 sm:mb-6 shadow-lg shadow-emerald-500/40 relative">
            <p class="text-2xl sm:text-3xl font-bold text-white drop-shadow-md">4</p>
             <span class="absolute inset-0 w-full h-full bg-emerald-400 rounded-full blur-xl opacity-30 animate-pulse"></span>
          </div>
          <h3 class="text-xl sm:text-2xl font-semibold mb-2 text-emerald-200 drop-shadow-sm">Growth</h3>
          <p class="text-sm sm:text-base text-emerald-400 opacity-80 leading-relaxed">Monitoring performance and refining strategies for continuous improvement and growth.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Memphis_Gaming_Progress_Indicators

A complex, responsive progress indicators component for gaming, inspired by Memphis Design with a sunset color scheme. Features multiple progress bars, level display, and interactive elements, with dark mode support.

Open Preview

                <div class="bg-gradient-to-br from-orange-300 to-red-400 dark:from-gray-800 dark:to-gray-950 p-6 sm:p-8 md:p-10 lg:p-12 font-sans overflow-hidden relative rounded-lg shadow-xl">

  <!-- Memphis background elements (for visual flair) -->
  <div class="absolute top-0 left-0 w-full h-full pointer-events-none overflow-hidden">
    <div class="absolute w-40 h-40 bg-yellow-400 dark:bg-yellow-600 rounded-full opacity-50 -top-10 -left-10 mix-blend-multiply blur-xl"></div>
    <div class="absolute w-60 h-60 bg-red-500 dark:bg-red-700 rounded-lg transform rotate-45 opacity-40 top-1/3 left-1/4 mix-blend-multiply blur-xl"></div>
    <div class="absolute w-32 h-32 bg-orange-600 dark:bg-orange-800 rounded-full opacity-60 bottom-10 right-10 mix-blend-multiply blur-xl"></div>
    <div class="absolute w-52 h-52 bg-pink-400 dark:bg-pink-600 rounded-full opacity-50 -bottom-20 -right-20 mix-blend-multiply blur-xl"></div>
  </div>

  <div class="relative z-10 space-y-8">
    <!-- Header / Title -->
    <div class="text-center mb-8">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white dark:text-orange-300 drop-shadow-lg leading-tight relative">
        Player Progress
        <span class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-24 h-2 bg-yellow-300 dark:bg-yellow-500 rounded-full"></span>
      </h2>
      <p class="mt-3 text-sm sm:text-base text-orange-100 dark:text-gray-400 font-medium">Track your epic journey through the gaming world!</p>
    </div>

    <!-- Level Indicator & Player Info -->
    <div class="flex flex-col md:flex-row items-center justify-between bg-white/20 dark:bg-gray-800/50 backdrop-blur-sm p-4 sm:p-6 rounded-xl shadow-lg border border-white/30 dark:border-gray-700/50 transition-all duration-300 hover:shadow-2xl">
      <div class="flex items-center space-x-4 mb-4 md:mb-0">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Player Avatar" class="w-16 h-16 sm:w-20 sm:h-20 rounded-full border-4 border-yellow-300 dark:border-yellow-500 shadow-lg">
        <div>
          <p class="text-xl sm:text-2xl font-bold text-white dark:text-orange-300 drop-shadow-md">TurboGamerX</p>
          <p class="text-sm text-orange-100 dark:text-gray-400">Rank: Grand Master</p>
        </div>
      </div>
      <div class="text-center sm:text-right">
        <div class="bg-yellow-400 dark:bg-yellow-600 px-6 py-2 rounded-full shadow-lg transform rotate-2 hover:rotate-0 transition-transform duration-300">
          <p class="text-2xl sm:text-3xl font-extrabold text-red-700 dark:text-red-900 drop-shadow">Level 42</p>
        </div>
      </div>
    </div>

    <!-- Progress Bars Section -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

      <!-- XP Progress Bar -->
      <div class="bg-white/20 dark:bg-gray-800/50 backdrop-blur-sm p-5 rounded-xl shadow-lg border border-white/30 dark:border-gray-700/50 transform -rotate-1 hover:rotate-0 transition-transform duration-300">
        <p class="text-lg font-semibold text-white dark:text-gray-200 mb-3">Experience Points (XP)</p>
        <div class="w-full bg-red-600 dark:bg-gray-700 rounded-full h-4 sm:h-5 overflow-hidden shadow-inner relative">
          <div class="bg-gradient-to-r from-yellow-300 to-orange-500 dark:from-yellow-400 dark:to-orange-600 h-full rounded-full transition-all duration-700 ease-out" style="width: 75%;">
            <div class="absolute top-0 right-0 h-full w-2 bg-yellow-200 dark:bg-yellow-300 rounded-full blur-sm"></div>
          </div>
          <span class="absolute inset-0 flex items-center justify-center text-xs font-bold text-gray-800 dark:text-gray-100">75% (8500 / 11333 XP)</span>
        </div>
        <p class="text-sm text-yellow-100 dark:text-gray-400 mt-2">Next Level: 2833 XP</p>
      </div>

      <!-- Quest Completion Progress Bar -->
      <div class="bg-white/20 dark:bg-gray-800/50 backdrop-blur-sm p-5 rounded-xl shadow-lg border border-white/30 dark:border-gray-700/50 transform rotate-1 hover:rotate-0 transition-transform duration-300">
        <p class="text-lg font-semibold text-white dark:text-gray-200 mb-3">Quests Completed</p>
        <div class="w-full bg-green-600 dark:bg-gray-700 rounded-full h-4 sm:h-5 overflow-hidden shadow-inner relative">
          <div class="bg-gradient-to-r from-teal-300 to-blue-500 dark:from-teal-400 dark:to-blue-600 h-full rounded-full transition-all duration-700 ease-out" style="width: 90%;">
             <div class="absolute top-0 right-0 h-full w-2 bg-teal-200 dark:bg-teal-300 rounded-full blur-sm"></div>
          </div>
          <span class="absolute inset-0 flex items-center justify-center text-xs font-bold text-gray-800 dark:text-gray-100">90% (81 / 90 Quests)</span>
        </div>
        <p class="text-sm text-yellow-100 dark:text-gray-400 mt-2">Keep going, champion!</p>
      </div>

      <!-- Event Score Progress Bar -->
      <div class="bg-white/20 dark:bg-gray-800/50 backdrop-blur-sm p-5 rounded-xl shadow-lg border border-white/30 dark:border-gray-700/50 transform -rotate-1 hover:rotate-0 transition-transform duration-300">
        <p class="text-lg font-semibold text-white dark:text-gray-200 mb-3">Event Score: "Dragon's Ascent"</p>
        <div class="w-full bg-purple-600 dark:bg-gray-700 rounded-full h-4 sm:h-5 overflow-hidden shadow-inner relative">
          <div class="bg-gradient-to-r from-pink-300 to-purple-500 dark:from-pink-400 dark:to-purple-600 h-full rounded-full transition-all duration-700 ease-out" style="width: 60%;">
             <div class="absolute top-0 right-0 h-full w-2 bg-pink-200 dark:bg-pink-300 rounded-full blur-sm"></div>
          </div>
          <span class="absolute inset-0 flex items-center justify-center text-xs font-bold text-gray-800 dark:text-gray-100">60% (12000 / 20000 Pts)</span>
        </div>
        <p class="text-sm text-yellow-100 dark:text-gray-400 mt-2">Earn 8000 more points for exclusive rewards!</p>
      </div>

      <!-- Achievements Progress -->
      <div class="bg-white/20 dark:bg-gray-800/50 backdrop-blur-sm p-5 rounded-xl shadow-lg border border-white/30 dark:border-gray-700/50 transform rotate-1 hover:rotate-0 transition-transform duration-300">
        <p class="text-lg font-semibold text-white dark:text-gray-200 mb-3">Achievements Unlocked</p>
        <div class="flex items-center space-x-3">
          <div class="relative w-20 h-20 sm:w-24 sm:h-24 rounded-full bg-red-500 dark:bg-red-700 text-white flex items-center justify-center text-4xl sm:text-5xl font-bold border-4 border-yellow-300 dark:border-yellow-500 shadow-md">
            <span class="animate-pulse">🎉</span>
          </div>
          <div>
            <p class="text-2xl sm:text-3xl font-extrabold text-white dark:text-orange-300">15 / 20</p>
            <p class="text-sm text-orange-100 dark:text-gray-400">Total Achievements</p>
          </div>
        </div>
        <p class="text-sm text-yellow-100 dark:text-gray-400 mt-3">Almost there! Unlock unique titles and badges.</p>
      </div>

    </div>

    <!-- Call to Action / Footer -->
    <div class="text-center pt-8">
      <button class="bg-yellow-400 dark:bg-orange-600 hover:bg-yellow-500 dark:hover:bg-orange-700 text-red-800 dark:text-white font-bold py-3 px-8 rounded-full shadow-lg transform scale-105 hover:scale-110 transition-all duration-300 relative overflow-hidden group">
        <span class="relative z-10">Explore All Stats</span>
        <span class="absolute top-0 left-0 w-full h-full bg-white/20 dark:bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 animate-pulse"></span>
      </button>
      <p class="mt-4 text-xs text-orange-200 dark:text-gray-500 font-medium">Continue your adventure and set new records!</p>
    </div>

  </div>
</div>

Cyberpunk Agricultural Progress Indicators

A set of futuristic, cyberpunk-themed progress indicators for an agricultural or farming website, featuring warm sunset tones. Responsive with dark mode support.

Open Preview

                <div class="bg-zinc-950 text-orange-400 min-h-screen p-4 sm:p-8 dark:bg-black dark:text-orange-300 font-mono">
  <div class="max-w-7xl mx-auto py-8 lg:py-12">
    <h2 class="text-4xl sm:text-5xl font-extrabold text-center mb-8 sm:mb-12 tracking-wide uppercase leading-tight text-transparent bg-clip-text bg-gradient-to-r from-orange-400 to-red-600 dark:from-yellow-300 dark:to-orange-500 drop-shadow-md">
      Agro-Bot 7.0: Crop Cycle Nexus
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">

      <!-- Progress Card 1: Planting Phase -->
      <div class="bg-zinc-900 border border-orange-700/50 rounded-lg p-6 sm:p-8 shadow-xl relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 ease-in-out dark:bg-gray-950 dark:border-red-800/60">
        <div class="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-orange-600 to-red-800 rounded-full opacity-20 blur-xl dark:from-yellow-500 dark:to-orange-700"></div>
        <div class="flex items-center justify-between mb-5">
          <h3 class="text-2xl font-bold text-orange-300 dark:text-yellow-400">Planting Protocol</h3>
          <svg class="h-8 w-8 text-orange-500 group-hover:animate-pulse dark:text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 21h.01M17 7h3a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V9a2 2 0 012-2h3m0 0V5a2 2 0 012-2h2a2 2 0 012 2v2M7 7h10"></path></svg>
        </div>
        <p class="text-sm text-zinc-500 mb-4 dark:text-gray-400">Seed deployment and initial nutrient injection. Progress critical for sprout emergence.</p>
        <div class="w-full bg-zinc-800 rounded-full h-3 mb-2 dark:bg-gray-800">
          <div class="bg-gradient-to-r from-orange-500 to-red-700 h-3 rounded-full" style="width: 85%;"></div>
        </div>
        <div class="text-right text-sm text-orange-400 dark:text-yellow-300">85% Complete</div>
        <div class="mt-5 flex items-center text-sm text-zinc-500 dark:text-gray-400">
          <svg class="w-4 h-4 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
          Last Check: 10/26/23 14:30 GMT
        </div>
      </div>

      <!-- Progress Card 2: Growth Monitoring -->
      <div class="bg-zinc-900 border border-orange-700/50 rounded-lg p-6 sm:p-8 shadow-xl relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 ease-in-out dark:bg-gray-950 dark:border-red-800/60">
        <div class="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-yellow-500 to-orange-700 rounded-full opacity-20 blur-xl dark:from-red-600 dark:to-orange-800"></div>
        <div class="flex items-center justify-between mb-5">
          <h3 class="text-2xl font-bold text-orange-300 dark:text-yellow-400">Biomass Accumulation</h3>
          <svg class="h-8 w-8 text-yellow-500 group-hover:animate-spin dark:text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
        </div>
        <p class="text-sm text-zinc-500 mb-4 dark:text-gray-400">Real-time monitoring of crop growth and health indicators. AI-driven pathogen detection.</p>
        <div class="w-full bg-zinc-800 rounded-full h-3 mb-2 dark:bg-gray-800">
          <div class="bg-gradient-to-r from-yellow-500 to-orange-700 h-3 rounded-full" style="width: 60%;"></div>
        </div>
        <div class="text-right text-sm text-orange-400 dark:text-yellow-300">60% Data Collected</div>
        <div class="mt-5 flex items-center text-sm text-zinc-500 dark:text-gray-400">
          <svg class="w-4 h-4 mr-2 text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8h4a4 4 0 100-8H8zm0 7a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
          Next Scan: 10/27/23 08:00 GMT
        </div>
      </div>

      <!-- Progress Card 3: Resource Optimization -->
      <div class="bg-zinc-900 border border-orange-700/50 rounded-lg p-6 sm:p-8 shadow-xl relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 ease-in-out dark:bg-gray-950 dark:border-red-800/60">
        <div class="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-red-600 to-yellow-500 rounded-full opacity-20 blur-xl dark:from-orange-700 dark:to-red-800"></div>
        <div class="flex items-center justify-between mb-5">
          <h3 class="text-2xl font-bold text-orange-300 dark:text-yellow-400">Hydro-Energy Flow</h3>
          <svg class="h-8 w-8 text-red-500 group-hover:scale-125 transition-transform duration-300 dark:text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
        </div>
        <p class="text-sm text-zinc-500 mb-4 dark:text-gray-400">Water and nutrient delivery system status. Awaiting recalibration of soil sensors.</p>
        <div class="w-full bg-zinc-800 rounded-full h-3 mb-2 dark:bg-gray-800">
          <div class="bg-gradient-to-r from-red-500 to-orange-700 h-3 rounded-full" style="width: 40%;"></div>
        </div>
        <div class="text-right text-sm text-orange-400 dark:text-yellow-300">40% Optimized</div>
        <div class="mt-5 flex items-start text-sm text-zinc-500 dark:text-gray-400">
          <svg class="w-4 h-4 mr-2 text-red-500 animate-bounce" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.3 2.672-1.3 3.437 0L14.4 7.252c1.346 2.241-.019 5.06-2.5 5.06h-5.8c-2.481 0-3.847-2.819-2.5-5.06l2.744-4.503z" clip-rule="evenodd"></path></svg>
          <span class="text-red-500 uppercase font-bold">Alert:</span> Sensor Array Offline
        </div>
      </div>

      <!-- Progress Card 4: Harvesting Forecast -->
      <div class="bg-zinc-900 border border-orange-700/50 rounded-lg p-6 sm:p-8 shadow-xl relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 ease-in-out dark:bg-gray-950 dark:border-red-800/60">
        <div class="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-orange-400 to-red-600 rounded-full opacity-20 blur-xl dark:from-yellow-300 dark:to-orange-500"></div>
        <div class="flex items-center justify-between mb-5">
          <h3 class="text-2xl font-bold text-orange-300 dark:text-yellow-400">Yield Prediction</h3>
          <svg class="h-8 w-8 text-orange-500 group-hover:rotate-12 transition-transform duration-300 dark:text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
        </div>
        <p class="text-sm text-zinc-500 mb-4 dark:text-gray-400">Forecasting harvest dates and estimated output based on current growth data.</p>
        <div class="w-full bg-zinc-800 rounded-full h-3 mb-2 dark:bg-gray-800">
          <div class="bg-gradient-to-r from-orange-500 to-red-700 h-3 rounded-full" style="width: 75%;"></div>
        </div>
        <div class="text-right text-sm text-orange-400 dark:text-yellow-300">75% Confidence</div>
        <div class="mt-5 flex items-center text-sm text-zinc-500 dark:text-gray-400">
          <img src="https://picsum.photos/id/1015/30/30" alt="Farm Worker Avatar" class="rounded-full w-6 h-6 mr-2 border border-orange-500 dark:border-yellow-400">
          Analyst: Unit Alpha-7
        </div>
      </div>

      <!-- Progress Card 5: Supply Chain Logistics -->
      <div class="bg-zinc-900 border border-orange-700/50 rounded-lg p-6 sm:p-8 shadow-xl relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 ease-in-out dark:bg-gray-950 dark:border-red-800/60">
        <div class="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-yellow-500 to-orange-700 rounded-full opacity-20 blur-xl dark:from-red-600 dark:to-orange-800"></div>
        <div class="flex items-center justify-between mb-5">
          <h3 class="text-2xl font-bold text-orange-300 dark:text-yellow-400">Logistics Network</h3>
          <svg class="h-8 w-8 text-yellow-500 group-hover:translate-x-1 transition-transform duration-300 dark:text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-5m3 5v-1.11a3 3 0 011.66-2.793L16.2 8.3c.75-.414 1.25-.133 1.25.75V17m-9 4h6a2 2 0 002-2v-3a2 2 0 00-2-2H9a2 2 0 00-2 2v3a2 2 0 002 2z"></path></svg>
        </div>
        <p class="text-sm text-zinc-500 mb-4 dark:text-gray-400">Coordination of automated transport units and storage facilities. Route optimization initiated.</p>
        <div class="w-full bg-zinc-800 rounded-full h-3 mb-2 dark:bg-gray-800">
          <div class="bg-gradient-to-r from-yellow-500 to-orange-700 h-3 rounded-full" style="width: 90%;"></div>
        </div>
        <div class="text-right text-sm text-orange-400 dark:text-yellow-300">90% Routes Optimized</div>
        <div class="mt-5 flex items-center text-sm text-zinc-500 dark:text-gray-400">
          <svg class="w-4 h-4 mr-2 text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm-7-8a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
          Status: Auto-Dispatch Active
        </div>
      </div>

      <!-- Progress Card 6: Environmental Impact -->
      <div class="bg-zinc-900 border border-orange-700/50 rounded-lg p-6 sm:p-8 shadow-xl relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 ease-in-out dark:bg-gray-950 dark:border-red-800/60">
        <div class="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-red-600 to-yellow-500 rounded-full opacity-20 blur-xl dark:from-orange-700 dark:to-red-800"></div>
        <div class="flex items-center justify-between mb-5">
          <h3 class="text-2xl font-bold text-orange-300 dark:text-yellow-400">Eco-Footprint Analysis</h3>
          <svg class="h-8 w-8 text-red-500 group-hover:animate-pulse dark:text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11V7a2 2 0 012-2h4a2 2 0 012 2v4m-.586 1.707a2 2 0 002.828 0L20 10.414V17a2 2 0 01-2 2H6a2 2 0 01-2-2V7.414L6.586 5.828a2 2 0 000-2.828z"></path></svg>
        </div>
        <p class="text-sm text-zinc-500 mb-4 dark:text-gray-400">Analyzing resource consumption and waste generation for sustainability metrics. Goal: Carbon Negative.</p>
        <div class="w-full bg-zinc-800 rounded-full h-3 mb-2 dark:bg-gray-800">
          <div class="bg-gradient-to-r from-red-500 to-orange-700 h-3 rounded-full" style="width: 95%;"></div>
        </div>
        <div class="text-right text-sm text-orange-400 dark:text-yellow-300">95% Reviewed</div>
        <div class="mt-5 flex items-center text-sm text-zinc-500 dark:text-gray-400">
          <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="Environmentalist Avatar" class="rounded-full w-6 h-6 mr-2 border border-red-500 dark:border-orange-500">
          Validated by: Dr. Neo Verde
        </div>
      </div>

    </div>

    <div class="text-center mt-12 sm:mt-16">
      <button class="px-8 py-3 rounded-full text-lg font-bold uppercase tracking-wider
        bg-gradient-to-r from-orange-600 to-red-800 text-white shadow-lg 
        hover:from-orange-700 hover:to-red-900 focus:outline-none focus:ring-4 
        focus:ring-orange-500 focus:ring-opacity-75 transition-all duration-300 
        transform hover:scale-105 active:scale-95
        dark:from-yellow-500 dark:to-orange-700 dark:hover:from-yellow-600 dark:hover:to-orange-800
        dark:focus:ring-yellow-400 dark:shadow-red-800/40">
        Initiate System Recalibration
      </button>
    </div>

  </div>
</div>

Memphis_Weather_Progress_Indicator

A weather progress indicator component with a Memphis design style, featuring bold black and white with a bright accent color, suitable for displaying climate data. It includes responsive design and dark mode support.

Open Preview

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

A responsive Progress Indicator Component with Brutalism design, earthy color tones, and dark theme support, suitable for a blog or content site.

Open Preview

                <div class="min-h-screen bg-stone-100 dark:bg-stone-900 p-8 flex flex-col items-center justify-center font-mono">
  <div class="w-full max-w-2xl bg-stone-300 dark:bg-stone-700 border-4 border-stone-900 dark:border-stone-100 p-6 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] mb-8">
    <h1 class="text-3xl md:text-5xl text-stone-900 dark:text-stone-100 mb-6 border-b-4 border-stone-900 dark:border-stone-100 pb-2">Article Progress</h1>
    
    <!-- Progress Bar 1 -->
    <div class="mb-6">
      <h2 class="text-xl md:text-2xl text-stone-800 dark:text-stone-200 mb-2">Section 1: Introduction</h2>
      <div class="w-full h-8 bg-stone-500 dark:bg-stone-600 border-4 border-stone-900 dark:border-stone-100 overflow-hidden">
        <div class="h-full bg-amber-700 dark:bg-amber-400" style="width: 30%;"></div>
      </div>
      <p class="text-stone-700 dark:text-stone-300 mt-1 text-sm">30% Completed</p>
    </div>

    <!-- Progress Bar 2 -->
    <div class="mb-6">
      <h2 class="text-xl md:text-2xl text-stone-800 dark:text-stone-200 mb-2">Section 2: Core Concepts</h2>
      <div class="w-full h-8 bg-stone-500 dark:bg-stone-600 border-4 border-stone-900 dark:border-stone-100 overflow-hidden">
        <div class="h-full bg-amber-700 dark:bg-amber-400" style="width: 65%;"></div>
      </div>
      <p class="text-stone-700 dark:text-stone-300 mt-1 text-sm">65% Completed</p>
    </div>

    <!-- Progress Bar 3 -->
    <div class="mb-6">
      <h2 class="text-xl md:text-2xl text-stone-800 dark:text-stone-200 mb-2">Section 3: Conclusion</h2>
      <div class="w-full h-8 bg-stone-500 dark:bg-stone-600 border-4 border-stone-900 dark:border-stone-100 overflow-hidden">
        <div class="h-full bg-amber-700 dark:bg-amber-400" style="width: 10%;"></div>
      </div>
      <p class="text-stone-700 dark:text-stone-300 mt-1 text-sm">10% Completed</p>
    </div>

    <!-- Article Completion Indicator -->
    <div class="mt-8 pt-4 border-t-4 border-stone-900 dark:border-stone-100">
      <h2 class="text-2xl md:text-3xl text-stone-900 dark:text-stone-100 mb-4">Overall Article Progress</h2>
      <div class="w-full bg-stone-500 dark:bg-stone-600 border-4 border-stone-900 dark:border-stone-100 h-10 flex items-center justify-center relative">
        <div class="h-full bg-green-700 dark:bg-green-400 transition-all duration-700 ease-out" style="width: 45%;"></div>
        <span class="absolute text-stone-100 dark:text-stone-900 text-lg font-bold">45% Complete</span>
      </div>
      <p class="text-stone-700 dark:text-stone-300 mt-2 text-sm text-center">Keep reading to finish the article!</p>
    </div>

  </div>
</div>

Progress Indicators Component

A glassmorphism-styled progress indicator component for social media applications, featuring frosted glass-like translucent elements with blur effects. It uses an analogous color scheme and offers a complex, rich interface with multiple interactive elements. The component is responsive and supports a dark theme with Tailwind CSS.

Open Preview

                <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Glassmorphism Progress Indicator</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    body {
      background-color: #e0f2f7; /* Light blue background */
    }
    .dark body {
      background-color: #2c3e50; /* Dark blue background */
    }
    .glass-container {
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .dark .glass-container {
      background: rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .progress-bar {
      background: linear-gradient(to right, #a7e6ff, #6dd5ed);
    }
    .dark .progress-bar {
      background: linear-gradient(to right, #3498db, #2980b9);
    }
  </style>
</head>
<body>
  <div class="min-h-screen flex items-center justify-center p-4">
    <div class="glass-container rounded-lg p-6 w-full max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Your Social Milestones</h2>

      <!-- Progress Item 1: Profile Completion -->
      <div class="mb-6">
        <div class="flex justify-between items-center mb-2">
          <span class="text-lg font-medium text-gray-700 dark:text-gray-200">Profile Completion</span>
          <span class="text-lg font-semibold text-blue-700 dark:text-blue-300">75%</span>
        </div>
        <div class="w-full h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
          <div class="progress-bar h-full rounded-full" style="width: 75%;"></div>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-2">Complete your profile to unlock new features!</p>
      </div>

      <!-- Progress Item 2: Connections Growth -->
      <div class="mb-6">
        <div class="flex justify-between items-center mb-2">
          <span class="text-lg font-medium text-gray-700 dark:text-gray-200">Connections Growth</span>
          <span class="text-lg font-semibold text-blue-700 dark:text-blue-300">50%</span>
        </div>
        <div class="w-full h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
          <div class="progress-bar h-full rounded-full" style="width: 50%;"></div>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-2">Connect with more friends and expand your network.</p>
      </div>

      <!-- Progress Item 3: Post Engagement -->
      <div class="mb-6">
        <div class="flex justify-between items-center mb-2">
          <span class="text-lg font-medium text-gray-700 dark:text-gray-200">Post Engagement</span>
          <span class="text-lg font-semibold text-blue-700 dark:text-blue-300">90%</span>
        </div>
        <div class="w-full h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
          <div class="progress-bar h-full rounded-full" style="width: 90%;"></div>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-2">Keep creating engaging content!</p>
      </div>

      <!-- Interactive Goal Setting -->
      <div class="mt-8 pt-6 border-t border-gray-300 dark:border-gray-600">
        <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 text-center">Set Your Next Goal</h3>
        <div class="flex flex-col md:flex-row gap-4">
          <input type="text" placeholder="e.g., Reach 100 connections" 
                 class="flex-grow p-3 rounded-md bg-gray-100 dark:bg-gray-700 
                        text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 
                        focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 glass-container" />
          <button class="px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-md 
                         transition duration-300 ease-in-out transform hover:scale-105
                         focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 glass-container">
            Set Goal
          </button>
        </div>
      </div>

    </div>
  </div>
</body>
</html>

Progress Indicators Component

A responsive Progress Indicators Component designed for a Dark Mode UI dashboard with an analogous color scheme. It includes various progress indicators like bars, circles, and an activity feed, all styled with Tailwind CSS for dark mode support. No JavaScript is used.

Open Preview

                <div class="min-h-screen bg-gray-900 text-gray-100 p-8 dark:bg-gray-900">
  <h1 class="text-4xl font-bold mb-8 text-indigo-400">Dashboard Progress</h1>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

    <!-- Progress Bar 1 -->
    <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
      <h2 class="text-2xl font-semibold mb-4 text-purple-300">Project Alpha Progress</h2>
      <div class="w-full bg-gray-700 rounded-full h-4 mb-2">
        <div class="bg-gradient-to-r from-purple-500 to-indigo-500 h-4 rounded-full" style="width: 75%;"></div>
      </div>
      <p class="text-sm text-gray-400">75% Complete - Next deadline in 5 days</p>
    </div>

    <!-- Progress Bar 2 -->
    <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
      <h2 class="text-2xl font-semibold mb-4 text-blue-300">Task Beta Completion</h2>
      <div class="w-full bg-gray-700 rounded-full h-4 mb-2">
        <div class="bg-gradient-to-r from-blue-500 to-cyan-500 h-4 rounded-full" style="width: 90%;"></div>
      </div>
      <p class="text-sm text-gray-400">90% Done - Awaiting final review</p>
    </div>

    <!-- Circular Progress -->
    <div class="bg-gray-800 p-6 rounded-lg shadow-lg flex flex-col items-center">
      <h2 class="text-2xl font-semibold mb-4 text-green-300">Server Load</h2>
      <div class="relative w-24 h-24 mb-2">
        <svg class="w-full h-full transform -rotate-90" viewBox="0 0 100 100">
          <circle class="text-gray-700 stroke-current" stroke-width="10" cx="50" cy="50" r="40" fill="transparent"></circle>
          <circle class="text-green-500 stroke-current progress-ring__circle" stroke-width="10" stroke-linecap="round" cx="50" cy="50" r="40" fill="transparent" stroke-dasharray="251.2" stroke-dashoffset="62.8"></circle>
        </svg>
        <span class="absolute inset-0 flex items-center justify-center text-xl font-bold text-green-400">75%</span>
      </div>
      <p class="text-sm text-gray-400">Current CPU Usage</p>
    </div>

    <!-- Activity Feed -->
    <div class="bg-gray-800 p-6 rounded-lg shadow-lg col-span-1 md:col-span-2 lg:col-span-1">
      <h2 class="text-2xl font-semibold mb-4 text-orange-300">Recent Activity</h2>
      <ul class="space-y-4">
        <li class="flex items-center space-x-3">
          <div class="flex-shrink-0 w-3 h-3 rounded-full bg-orange-500"></div>
          <p class="text-gray-300"><span class="font-medium">John Doe</span> updated project status <span class="text-orange-400">"In Progress"</span></p>
        </li>
        <li class="flex items-center space-x-3">
          <div class="flex-shrink-0 w-3 h-3 rounded-full bg-orange-500"></div>
          <p class="text-gray-300"><span class="font-medium">Jane Smith</span> completed <span class="text-orange-400">"Design Mockups"</span> task</p>
        </li>
        <li class="flex items-center space-x-3">
          <div class="flex-shrink-0 w-3 h-3 rounded-full bg-orange-500"></div>
          <p class="text-gray-300"><span class="font-medium">Team Lead</span> reviewed <span class="text-orange-400">" sprint 2 tasks"</span></p>
        </li>
      </ul>
    </div>

    <!-- Key Performance Indicators (KPIs) -->
    <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
      <h2 class="text-2xl font-semibold mb-4 text-teal-300">Key Performance Indicators</h2>
      <div class="space-y-4">
        <div class="flex justify-between items-center">
          <span class="text-gray-300">Conversion Rate:</span>
          <span class="text-teal-400 font-bold">4.5%</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-gray-300">Bounce Rate:</span>
          <span class="text-red-400 font-bold">55%</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-gray-300">Avg. Session Duration:</span>
          <span class="text-teal-400 font-bold">3:45 min</span>
        </div>
      </div>
    </div>

    <!-- Donut Chart Placeholder (Conceptual, requires JS for actual functionality) -->
    <div class="bg-gray-800 p-6 rounded-lg shadow-lg flex flex-col items-center justify-center">
      <h2 class="text-2xl font-semibold mb-4 text-pink-300">Project Distribution</h2>
      <div class="relative w-32 h-32">
        <div class="absolute inset-0 rounded-full bg-pink-500 opacity-70" style="clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);"></div>
        <div class="absolute inset-0 rounded-full bg-purple-500 opacity-70" style="clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <div class="w-20 h-20 rounded-full bg-gray-800"></div>
        </div>
      </div>
      <p class="text-sm text-gray-400 mt-2">Marketing (50%), Development (50%)</p>
    </div>

  </div>

  <!-- Footer or additional dashboard elements -->
  <div class="mt-8 text-center text-gray-600">
    <p>&copy; 2023 Dashboard Analytics. All rights reserved.</p>
  </div>

</div>

BrutalistGrayscaleProgressBar

A brutalist-style grayscale progress bar for blog content, with simple design, dark mode support, and responsiveness.

Open Preview

                <div class="w-full bg-gray-800 h-4 dark:bg-gray-200">
  <div class="bg-gray-400 h-4 dark:bg-gray-600" style="width: 50%;"></div>
</div>

Progress Indicators Component

A brutalist style progress indicators component with high contrast, showcasing work or products in a portfolio. It features a rich interface with multiple interactive elements, designed to be responsive with dark theme support using Tailwind CSS.

Open Preview

                <div class="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-8 space-y-8">
  <h1 class="text-4xl font-bold mb-4 text-gray-100">Portfolio Progress Indicators</h1>
  <div class="bg-gray-800 rounded-lg w-full max-w-xl p-6 shadow-lg space-y-6">
    <h2 class="text-2xl font-bold text-gray-200">Current Projects</h2>
    <div class="space-y-4">
      <div class="flex justify-between items-center bg-gray-700 p-4 rounded-lg">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/50/50" alt="Project 1" class="rounded-full">
          <span class="text-lg font-semibold">Project Alpha</span>
        </div>
        <div class="relative w-full h-4 bg-gray-600 rounded-full overflow-hidden">
          <div class="absolute top-0 left-0 h-4 bg-green-500" style="width: 60%;"></div>
        </div>
      </div>
      <div class="flex justify-between items-center bg-gray-700 p-4 rounded-lg">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/50/50" alt="Project 2" class="rounded-full">
          <span class="text-lg font-semibold">Project Beta</span>
        </div>
        <div class="relative w-full h-4 bg-gray-600 rounded-full overflow-hidden">
          <div class="absolute top-0 left-0 h-4 bg-yellow-500" style="width: 40%;"></div>
        </div>
      </div>
      <div class="flex justify-between items-center bg-gray-700 p-4 rounded-lg">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/50/50" alt="Project 3" class="rounded-full">
          <span class="text-lg font-semibold">Project Gamma</span>
        </div>
        <div class="relative w-full h-4 bg-gray-600 rounded-full overflow-hidden">
          <div class="absolute top-0 left-0 h-4 bg-red-500" style="width: 80%;"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="bg-gray-800 rounded-lg w-full max-w-xl p-6 shadow-lg">
    <h2 class="text-2xl font-bold text-gray-200">Completed Projects</h2>
    <div class="space-y-4">
      <div class="flex justify-between items-center bg-gray-700 p-4 rounded-lg">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/50/50" alt="Project 4" class="rounded-full">
          <span class="text-lg font-semibold">Project Delta</span>
        </div>
        <div class="relative w-full h-4 bg-gray-600 rounded-full overflow-hidden">
          <div class="absolute top-0 left-0 h-4 bg-blue-500" style="width: 100%;"></div>
        </div>
      </div>
      <div class="flex justify-between items-center bg-gray-700 p-4 rounded-lg">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/50/50" alt="Project 5" class="rounded-full">
          <span class="text-lg font-semibold">Project Epsilon</span>
        </div>
        <div class="relative w-full h-4 bg-gray-600 rounded-full overflow-hidden">
          <div class="absolute top-0 left-0 h-4 bg-purple-500" style="width: 90%;"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Search Components

Categories

Progress Indicators