Indicatori di progresso

Componente Indicatori di progresso

Un componente indicatore di stato in stile glassmorphism per applicazioni di social media, con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura. Utilizza una combinazione di colori analoga e offre un'interfaccia complessa e ricca con più elementi interattivi. Il componente è reattivo e supporta un tema scuro con Tailwind CSS.

Apri anteprima

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

Componente Indicatori di progresso

Un componente reattivo degli indicatori di stato progettato per un dashboard dell'interfaccia utente in modalità scura con una combinazione di colori analoga. Include vari indicatori di avanzamento come barre, cerchi e un feed di attività, il tutto in stile CSS Tailwind per il supporto della modalità oscura. Non viene utilizzato alcun JavaScript.

Apri anteprima

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

BrutalistaScala di grigiBarra di progresso

Una barra di avanzamento in scala di grigi in stile brutalista per i contenuti del blog, con un design semplice, supporto per la modalità oscura e reattività.

Apri anteprima

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

Componente Indicatori di progresso

Un componente di indicatori di progresso in stile brutalista ad alto contrasto, che mostra il lavoro o i prodotti in un portfolio. È dotato di un'interfaccia ricca con più elementi interattivi, progettata per essere reattiva con il supporto del tema scuro utilizzando Tailwind CSS.

Apri anteprima

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

Componente Indicatori di progresso

Un semplice indicatore di avanzamento progettato con un effetto glassmorphism, adatto per siti di e-commerce con supporto alla modalità scura e una combinazione di colori monocromatica.

Apri anteprima

                <div class="flex flex-col items-center justify-center p-5 bg-white bg-opacity-30 backdrop-blur-sm dark:bg-gray-800 dark:bg-opacity-30 rounded-lg">
    <h1 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Order Progress</h1>
    <div class="w-full mx-auto">
        <!-- Progress Bar -->
        <div class="relative pt-1">
            <div class="flex mb-2 items-center justify-between">
                <div class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-800 dark:text-white bg-blue-200 dark:bg-blue-600">
                    1. Add to Cart
                </div>
                <div class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-800 dark:text-white bg-blue-200 dark:bg-blue-600">
                    2. Checkout
                </div>
                <div class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-800 dark:text-white bg-blue-200 dark:bg-blue-600">
                    3. Payment
                </div>
            </div>
            <div class="flex h-2 mb-4 rounded bg-gray-300 dark:bg-gray-600">
                <div class="w-1/3 h-full bg-blue-600 dark:bg-blue-300"></div>
            </div>
        </div>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full">
    </div>
    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Estimated delivery: 3-5 business days</p>
</div>

Componente Indicatori di progresso

Un componente indicatore di avanzamento minimalista progettato per mostrare i progressi del portfolio utilizzando colori vivaci e un design reattivo con supporto per temi scuri.

Apri anteprima

                <div class="max-w-4xl mx-auto p-8">
  <h2 class="text-2xl font-bold text-center mb-6">Portfolio Progress Indicators</h2>
  <div class="space-y-8">
    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-5 shadow-lg">
      <div class="flex items-center justify-between mb-2">
        <span class="text-lg font-semibold text-blue-600 dark:text-blue-400">Project 1</span>
        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">70%</span>
      </div>
      <div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
        <div class="absolute h-4 bg-blue-600 dark:bg-blue-400 rounded-full" style="width: 70%;"></div>
      </div>
    </div>
    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-5 shadow-lg">
      <div class="flex items-center justify-between mb-2">
        <span class="text-lg font-semibold text-red-600 dark:text-red-400">Project 2</span>
        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">45%</span>
      </div>
      <div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
        <div class="absolute h-4 bg-red-600 dark:bg-red-400 rounded-full" style="width: 45%;"></div>
      </div>
    </div>
    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-5 shadow-lg">
      <div class="flex items-center justify-between mb-2">
        <span class="text-lg font-semibold text-green-600 dark:text-green-400">Project 3</span>
        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">90%</span>
      </div>
      <div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
        <div class="absolute h-4 bg-green-600 dark:bg-green-400 rounded-full" style="width: 90%;"></div>
      </div>
    </div>
    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-5 shadow-lg">
      <div class="flex items-center justify-between mb-2">
        <span class="text-lg font-semibold text-yellow-600 dark:text-yellow-400">Project 4</span>
        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">60%</span>
      </div>
      <div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
        <div class="absolute h-4 bg-yellow-600 dark:bg-yellow-400 rounded-full" style="width: 60%;"></div>
      </div>
    </div>
  </div>
</div>

Componente Indicatori di progresso

Un semplice componente Progress Indicators ispirato all'estetica retrò/vintage degli anni '80 e '90, che utilizza una combinazione di colori complementari. Progettato per le interfacce dei social media e reattivo con supporto per il tema scuro.

Apri anteprima

                <div class="flex flex-col items-center justify-center p-6 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-white mb-4">Progress Indicators</h2>
    <div class="w-full bg-gray-700 dark:bg-gray-600 rounded-lg">
        <div class="bg-blue-500 dark:bg-blue-400 h-4 rounded-lg" style="width: 70%;"></div>
    </div>
    <div class="flex justify-between w-full text-sm mt-2 text-gray-300 dark:text-gray-200">
        <span>0%</span>
        <span>70%</span>
    </div>
    <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-blue-500">
        <div class="ml-3">
            <p class="text-md text-white">User Name</p>
            <p class="text-sm text-gray-400 dark:text-gray-500">Status: Active</p>
        </div>
    </div>
    <p class="text-gray-500 dark:text-gray-400 mt-2 text-center">Loading data...</p>
    <img src="https://picsum.photos/200/100?random=1" alt="Random Image" class="mt-4 rounded-lg shadow-md">
</div>

Componente Indicatori di progresso

Un indicatore di avanzamento in stile neumorfico adatto per le interfacce dei social media, caratterizzato da un layout semplice e un design reattivo con supporto per la modalità scura.

Apri anteprima

                <div class="flex flex-col items-center justify-center p-6">
  <div class="w-full max-w-xs p-4 bg-gray-200 rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-md">
    <h3 class="text-center text-lg font-semibold text-gray-800 dark:text-gray-200">Profile Completion</h3>
    <div class="my-4">
      <div class="flex justify-between">
        <span class="text-sm text-gray-600 dark:text-gray-400">0%</span>
        <span class="text-sm text-gray-600 dark:text-gray-400">100%</span>
      </div>
      <div class="h-2 bg-gray-300 rounded-lg dark:bg-gray-700">
        <div class="h-full bg-gradient-to-r from-green-400 to-blue-500 rounded-lg" style="width: 70%;"></div>
      </div>
    </div>
    <div class="flex items-center justify-between">
      <img src="https://picsum.photos/40" alt="User Avatar" class="rounded-full border-2 border-gray-300 dark:border-gray-600" />
      <span class="text-sm text-gray-800 dark:text-gray-200">User Name</span>
    </div>
  </div>
</div>

Componente Indicatori di progresso

Un componente per gli indicatori di avanzamento dello stile di progettazione 3D con combinazione di colori in scala di grigi per il consumo di contenuti del blog, con design reattivo e supporto per la modalità scura.

Apri anteprima

                <div class="flex flex-col items-center justify-center p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Progress Indicators</h2>
    <div class="relative w-full max-w-md">
        <div class="flex items-center justify-between mb-2">
            <span class="text-gray-600 dark:text-gray-400">Step 1</span>
            <span class="text-gray-600 dark:text-gray-400">20%</span>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-full h-4">
            <div class="bg-gray-800 dark:bg-gray-300 h-4 rounded-full" style="width: 20%;"></div>
        </div>
    </div>
    <div class="relative w-full max-w-md mt-4">
        <div class="flex items-center justify-between mb-2">
            <span class="text-gray-600 dark:text-gray-400">Step 2</span>
            <span class="text-gray-600 dark:text-gray-400">50%</span>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-full h-4">
            <div class="bg-gray-800 dark:bg-gray-300 h-4 rounded-full" style="width: 50%;"></div>
        </div>
    </div>
    <div class="relative w-full max-w-md mt-4">
        <div class="flex items-center justify-between mb-2">
            <span class="text-gray-600 dark:text-gray-400">Step 3</span>
            <span class="text-gray-600 dark:text-gray-400">80%</span>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-full h-4">
            <div class="bg-gray-800 dark:bg-gray-300 h-4 rounded-full" style="width: 80%;"></div>
        </div>
    </div>
    <div class="relative w-full max-w-md mt-4">
        <div class="flex items-center justify-between mb-2">
            <span class="text-gray-600 dark:text-gray-400">Step 4</span>
            <span class="text-gray-600 dark:text-gray-400">100%</span>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-full h-4">
            <div class="bg-gray-800 dark:bg-gray-300 h-4 rounded-full" style="width: 100%;"></div>
        </div>
    </div>
    <div class="mt-6">
        <img src="https://picsum.photos/200/100?random=1" alt="Content Image" class="rounded-md shadow-md">
    </div>
    <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-500 dark:border-gray-300"> 
        <span class="ml-2 text-gray-800 dark:text-white">Author Name</span>
    </div>
</div>

Componente degli indicatori di avanzamento del Glassmorphism

Componente degli indicatori di avanzamento Glassmorphism con combinazione di colori vibrante e complessità semplice.

Apri anteprima

                <div class="flex flex-col items-center justify-center min-h-screen dark:bg-gray-900">
  <div class="dark:bg-gray-800 bg-white bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg dark:backdrop-blur-lg rounded-lg p-6 shadow-xl dark:shadow-xl">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Progress</h2>
    <div class="w-64 h-4 bg-gray-300 rounded-full overflow-hidden dark:bg-gray-700">
      <div class="h-full bg-gradient-to-r from-cyan-400 to-blue-500 dark:from-cyan-600 dark:to-blue-700 w-3/4 rounded-full"></div>
    </div>
    <p class="text-sm text-gray-700 dark:text-gray-300 mt-2">75% Complete</p>
  </div>
</div>

Categorie