Search Components

Progress Bar

Indicator showing completion progress

Cyberpunk Neo-Retro Progress Bar

A moderate complexity progress bar component with a cyberpunk, neo-retro aesthetic, dark backgrounds, and muted vintage accent colors, designed for entertainment/media platforms. It features a segmented progress display and is fully responsive with dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-[#1a1a2e] dark:bg-gray-900 min-h-screen flex items-center justify-center font-mono text-gray-200">
  <div class="w-full max-w-2xl bg-[#0f0f20] dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-[#00f7ff33] dark:border-gray-700">
    <div class="p-4 sm:p-6 md:p-8 relative">
      <div class="text-lg sm:text-xl md:text-2xl font-bold text-[#00f7ff] dark:text-[#a0a0ff] mb-4 sm:mb-6 uppercase tracking-wider before:content-[''] before:absolute before:left-0 before:top-0 before:w-1 before:h-full before:bg-[#00f7ff]">Now Playing: Interstellar Echoes</div>
      <p class="text-sm sm:text-base text-gray-400 mb-6 sm:mb-8">Track 3 of 12 - Dreamscape Protocol</p>

      <!-- Progress Bar Container -->
      <div class="w-full bg-[#3c3c5a] dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden relative mb-4 sm:mb-6">
        <div class="absolute top-0 left-0 h-full rounded-full transition-all duration-500 ease-out"
             style="width: 65%; background-color: #ff5757; box-shadow: 0 0 8px #ff5757, 0 0 16px #ff5757;"
             aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" role="progressbar">
        </div>
        <div class="absolute top-0 left-1/3 w-1 bg-gray-500 rounded-full h-full"></div>
        <div class="absolute top-0 left-2/3 w-1 bg-gray-500 rounded-full h-full"></div>
      </div>

      <!-- Time Display -->
      <div class="flex justify-between text-xs sm:text-sm text-gray-400 mb-6 sm:mb-8">
        <span class="text-[#ff5757]">02:45</span>
        <span>04:10</span>
      </div>

      <!-- Control Buttons -->
      <div class="flex justify-center items-center space-x-6 sm:space-x-8 text-xl sm:text-2xl">
        <button class="text-[#82e0ff] dark:text-[#c0c0ff] hover:text-[#00f7ff] dark:hover:text-[#a0a0ff] transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-[#82e0ff] rounded-md p-1" aria-label="Previous Track">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-8 sm:w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
          </svg>
        </button>
        <button class="text-[#82e0ff] dark:text-[#c0c0ff] hover:text-[#00f7ff] dark:hover:text-[#a0a0ff] transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-[#82e0ff] rounded-full p-2 sm:p-3 border border-[#82e0ff] dark:border-[#c0c0ff] hover:border-[#00f7ff] dark:hover:border-[#a0a0ff] shadow-md shadow-[#82e0ff]/30">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 sm:h-10 sm:w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.125l-3.359-3.359A.858.858 0 0010 8.358v7.284a.858.858 0 001.393.616l3.359-3.359a.858.858 0 00-.001-1.234zM12 21a9 9 0 110-18 9 9 0 010 18z" />
          </svg>
        </button>
        <button class="text-[#82e0ff] dark:text-[#c0c0ff] hover:text-[#00f7ff] dark:hover:text-[#a0a0ff] transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-[#82e0ff] rounded-md p-1" aria-label="Next Track">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-8 sm:w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Bauhaus Progress Bar Component

A moderate complexity, responsive, Bauhaus-inspired progress bar component suitable for entertainment/media platforms, featuring cool neutrals and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans tracking-wide">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="p-6 sm:p-8 space-y-6">
      <div class="flex items-center justify-between">
        <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white">Now Playing</h2>
        <svg class="h-8 w-8 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h4l1-1 1-4m-7-10l7-10m7 10l-7 10m7-10l-4-4m-3 0L3 17l1-1h4l1-1 1-4m-7-10l7-10m7 10l-7 10m7-10l-4-4m-3 0L3 17l1-1h4l1-1 1-4m-7-10l7-10m7 10l-7 10m7-10l-4-4m-3 0L3 17l1-1h4l1-1 1-4"></path>
        </svg>
      </div>

      <div class="relative w-full rounded-full h-3 bg-gray-200 dark:bg-gray-700 overflow-hidden group">
        <div class="absolute top-0 left-0 h-full bg-blue-500 dark:bg-blue-600 rounded-full transition-all duration-500 ease-out" style="width: 65%;"></div>
        <div class="absolute top-1/2 -translate-y-1/2 left-[65%] w-4 h-4 bg-gray-900 dark:bg-gray-200 rounded-full border-2 border-gray-900 dark:border-gray-200 group-hover:scale-125 transition-transform duration-200 ease-out"></div>
      </div>

      <div class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400 font-medium">
        <span class="text-gray-900 dark:text-white">03:45</span>
        <span>05:30</span>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 items-center pt-4">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/id/1047/100/100" alt="Album Art" class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg object-cover border-2 border-gray-300 dark:border-gray-600">
          <div>
            <p class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white leading-tight">Geometric Dreams</p>
            <p class="text-md sm:text-lg text-gray-600 dark:text-gray-400 mt-1">The Bauhaus Ensemble</p>
          </div>
        </div>

        <div class="flex justify-around sm:justify-end space-x-6">
          <button class="p-3 sm:p-4 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800">
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.75 19l-7.5-7.5 7.5-7.5" />
            </svg>
          </button>
          <button class="p-4 sm:p-5 rounded-full bg-blue-500 text-white shadow-lg hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800">
            <svg class="h-7 w-7" fill="currentColor" viewBox="0 0 24 24">
              <path fill-rule="evenodd" d="M6 5v14a1 1 0 001.5 1.32l11-7a1 1 0 000-1.64l-11-7A1 1 0 006 5z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="p-3 sm:p-4 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800">
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

ProgressBarComponent

A simple, clean, and responsive progress bar component with Neon/Electric colors for food/restaurant websites, featuring dark mode support and Swiss/International Typography design.

Open Preview

                <div class="font-sans antialiased bg-gray-50 dark:bg-gray-900 p-4 sm:p-6 md:p-8 lg:p-10 flex min-h-screen items-center justify-center">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 sm:p-8 md:p-10 leading-tight border border-gray-200 dark:border-gray-700">
    <h2 class="text-xl sm:text-2xl md:text-3xl font-extrabold text-gray-900 dark:text-white mb-2 sm:mb-3 md:mb-4 tracking-tight">
      Your Order Progress
    </h2>
    <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 mb-6 sm:mb-8 md:mb-10">
      Keep an eye on your delicious order's journey!
    </p>

    <div class="mb-6 sm:mb-8 md:mb-10">
      <div class="flex justify-between items-center mb-2">
        <span class="text-lg sm:text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-pink-500 dark:from-red-400 dark:to-pink-400">
          Preparing Your Feast
        </span>
        <span class="text-sm sm:text-base font-semibold text-gray-800 dark:text-gray-200">
          75%
        </span>
      </div>
      <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3">
        <div class="bg-gradient-to-r from-fuchsia-500 to-pink-500 dark:from-fuchsia-400 dark:to-pink-400 h-3 rounded-full" style="width: 75%;">
        </div>
      </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-center sm:text-left">
      <div class="space-y-1">
        <p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 uppercase tracking-wider">
          Estimated Delivery
        </p>
        <p class="text-base sm:text-lg md:text-xl font-bold text-gray-900 dark:text-white">
          15-20 min
        </p>
      </div>
      <div class="space-y-1">
        <p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 uppercase tracking-wider">
          Order ID
        </p>
        <p class="text-base sm:text-lg md:text-xl font-bold text-gray-900 dark:text-white break-all">
          #FDRM_87Y5XC
        </p>
      </div>
    </div>

  </div>
</div>

Luxury_Grayscale_Social_Media_Progress_Bar

A complex, elegant, and responsive progress bar component for social media interfaces, featuring a grayscale luxury design with sophisticated typography and dark mode support.

Open Preview

                <div class="font-sans antialiased bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-4 sm:p-6 md:p-8 lg:p-10">
  <div class="max-w-3xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden">
    <div class="p-6 sm:p-8 md:p-10">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-6 tracking-tight dark:text-white">Profile Completion</h2>
      <p class="text-md sm:text-lg text-center text-gray-600 dark:text-gray-300 mb-8 max-w-xl mx-auto leading-relaxed">
        Enhance your presence by completing your profile. The more complete it is, the more opportunities you'll discover.
      </p>

      <!-- Main Progress Bar -->
      <div class="mb-10">
        <div class="flex justify-between items-center mb-2">
          <span class="text-lg font-semibold text-gray-700 dark:text-gray-200">Overall Progress</span>
          <span class="text-xl font-bold text-gray-900 dark:text-white">75%</span>
        </div>
        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden">
          <div class="bg-gradient-to-r from-gray-600 to-gray-900 dark:from-gray-300 dark:to-gray-500 h-full rounded-full" style="width: 75%;"></div>
        </div>
      </div>

      <!-- Detailed Steps -->
      <div class="space-y-6">

        <!-- Step 1: Basic Info -->
        <div class="flex items-center space-x-4">
          <div class="flex-shrink-0 w-10 h-10 rounded-full bg-gray-900 dark:bg-gray-300 flex items-center justify-center">
            <svg class="w-6 h-6 text-white dark:text-gray-900" 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.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 9.354V10a5 5 0 00-10 0v9.354m0 0a5 5 0 00-10 0v-9.354"></path>
            </svg>
          </div>
          <div class="flex-grow">
            <div class="flex justify-between items-center">
              <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Basic Profile Information</h3>
              <span class="text-sm font-medium text-gray-600 dark:text-gray-400">100%</span>
            </div>
            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mt-1">
              <div class="bg-gray-700 dark:bg-gray-400 h-full rounded-full" style="width: 100%;"></div>
            </div>
          </div>
          <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 px-3 py-1 rounded-md text-sm transition duration-300 ease-in-out">
            <svg class="w-5 h-5" 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 5l7 7-7 7"></path></svg>
          </button>
        </div>

        <!-- Step 2: Professional Details -->
        <div class="flex items-center space-x-4 opacity-75">
          <div class="flex-shrink-0 w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center">
            <svg class="w-6 h-6 text-gray-700 dark:text-gray-300" 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="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 4h2a2 2 0 012 2v10a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2m8 0h.01M6 16h.01"></path>
            </svg>
          </div>
          <div class="flex-grow">
            <div class="flex justify-between items-center">
              <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Professional &amp; Experience</h3>
              <span class="text-sm font-medium text-gray-600 dark:text-gray-400">50%</span>
            </div>
            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mt-1">
              <div class="bg-gray-700 dark:bg-gray-400 h-full rounded-full" style="width: 50%;"></div>
            </div>
          </div>
          <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 px-3 py-1 rounded-md text-sm transition duration-300 ease-in-out">
            <svg class="w-5 h-5" 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 5l7 7-7 7"></path></svg>
          </button>
        </div>

        <!-- Step 3: Interests and Skills -->
        <div class="flex items-center space-x-4 opacity-50">
          <div class="flex-shrink-0 w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center">
            <svg class="w-6 h-6 text-gray-700 dark:text-gray-300" 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="M10 20l4-16m4 4l4 4-4 4M6 4l-4 4 4 4"></path>
            </svg>
          </div>
          <div class="flex-grow">
            <div class="flex justify-between items-center">
              <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Interests &amp; Skills</h3>
              <span class="text-sm font-medium text-gray-600 dark:text-gray-400">25%</span>
            </div>
            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mt-1">
              <div class="bg-gray-700 dark:bg-gray-400 h-full rounded-full" style="width: 25%;"></div>
            </div>
          </div>
          <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 px-3 py-1 rounded-md text-sm transition duration-300 ease-in-out">
            <svg class="w-5 h-5" 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 5l7 7-7 7"></path></svg>
          </button>
        </div>

        <!-- Step 4: Social Links -->
        <div class="flex items-center space-x-4 opacity-25">
          <div class="flex-shrink-0 w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center">
            <svg class="w-6 h-6 text-gray-700 dark:text-gray-300" 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.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.102 1.101m-.757-4.898l-4 4a4 4 0 105.656 5.656l1.102-1.101"></path>
            </svg>
          </div>
          <div class="flex-grow">
            <div class="flex justify-between items-center">
              <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Social Media Links</h3>
              <span class="text-sm font-medium text-gray-600 dark:text-gray-400">0%</span>
            </div>
            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mt-1">
              <div class="bg-gray-700 dark:bg-gray-400 h-full rounded-full" style="width: 0%;"></div>
            </div>
          </div>
          <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 px-3 py-1 rounded-md text-sm transition duration-300 ease-in-out">
            <svg class="w-5 h-5" 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 5l7 7-7 7"></path></svg>
          </button>
        </div>
      </div>

      <!-- Call to Action -->
      <div class="mt-10 text-center">
        <button class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-full shadow-lg text-white bg-gray-900 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition duration-300 ease-in-out
                              dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-300 dark:focus:ring-gray-400">
          Complete Your Profile
          <svg class="ml-3 w-5 h-5" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </button>
      </div>
    </div>

    <!-- Decorative Footer -->
    <div class="p-4 bg-gray-100 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 text-center text-gray-500 dark:text-gray-400 text-sm">
      <p>Your privacy is important to us. Information shared helps connect you with relevant opportunities.</p>
    </div>

  </div>
</div>

E-commerce Order Progress Bar

A responsive progress bar component for e-commerce with dark mode support, featuring a monochromatic design. No JavaScript, only HTML and Tailwind CSS.

Open Preview

                <div class="dark:bg-gray-900 min-h-screen p-4 flex items-center justify-center">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Order Progress</h2>

    <div class="mb-8">
      <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Order Placed</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">100%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 100%;"></div>
      </div>
    </div>

    <div class="mb-8">
      <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Processing</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">75%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 75%;"></div>
      </div>
    </div>

    <div class="mb-8">
      <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Shipped</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">50%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 50%;"></div>
      </div>
    </div>

    <div class="mb-8">
      <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Out for Delivery</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">25%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 25%;"></div>
      </div>
    </div>

    <div>
      <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Delivered</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">0%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 0%;"></div>
      </div>
    </div>
  </div>
</div>

Minimalist Triadic Progress Bar

A minimalist, responsive progress bar with triadic color scheme and dark theme support, suitable for social media applications.

Open Preview

                
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">

  <!-- Progress Bar Container -->
  <div class="w-full max-w-md bg-cyan-200 dark:bg-cyan-800 rounded-full h-4 mb-4 relative">
    <!-- Progress Indicator - Using an arbitrary value with [] for demonstration -->
    <div class="bg-fuchsia-500 dark:bg-fuchsia-400 h-4 rounded-full" style="width: 75%;">
      <span class="absolute right-2 top-0 text-xs font-semibold text-gray-700 dark:text-gray-300">75%</span>
    </div>
  </div>

  <!-- Another Progress Bar Example -->
  <div class="w-full max-w-md bg-cyan-200 dark:bg-cyan-800 rounded-full h-4 relative">
    <div class="bg-yellow-500 dark:bg-yellow-400 h-4 rounded-full" style="width: 50%;">
      <span class="absolute right-2 top-0 text-xs font-semibold text-gray-700 dark:text-gray-300">50%</span>
    </div>
  </div>

</div>

Progress Bar

A responsive progress bar component with dark mode support for e-commerce, featuring a vibrant color scheme and a simple layout.

Open Preview

                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 relative overflow-hidden">
  <div class="bg-indigo-600 h-4 rounded-full dark:bg-indigo-400" style="width: 75%;">
    <span class="absolute right-2 top-0 h-full flex items-center text-white text-xs font-bold">75%</span>
  </div>
</div>

Skeuomorphic Progress Bar

Skeuomorphic progress bar component for portfolios, featuring a monochromatic color scheme and complex, interactive design with responsive and dark mode support using Tailwind CSS.

Open Preview

                <div class="p-8 bg-gray-200 dark:bg-gray-800 min-h-screen flex items-center justify-center">
  <div class="w-full max-w-md bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-xl shadow-2xl-inner relative">
    <div class="absolute inset-0 border-4 border-gray-400 dark:border-gray-600 rounded-xl pointer-events-none"></div>
    <div class="text-center mb-6">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-md">Project Progress</h2>
      <p class="text-gray-600 dark:text-gray-300 text-sm">Portfolio Showcase</p>
    </div>

    <div class="mb-8 relative">
      <div class="h-8 bg-gray-400 dark:bg-gray-600 rounded-full shadow-inner-lg overflow-hidden relative">
        <div class="absolute inset-y-0 left-0 w-3/4 bg-gradient-to-r from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800 rounded-full shadow-lg transition-all duration-500 ease-out flex items-center justify-end pr-3"
             style="width: 75%;">
          <span class="text-white text-sm font-bold drop-shadow-md">75%</span>
        </div>
        <div class="absolute top-1/2 left-3/4 -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-white dark:bg-gray-200 rounded-full shadow-md border-2 border-blue-500 dark:border-blue-700"></div>
      </div>
      <div class="text-gray-700 dark:text-gray-300 text-right mt-2 text-sm">Completed</div>
    </div>

    <div class="grid grid-cols-2 gap-4 text-sm">
      <div class="flex items-center space-x-2">
        <div class="w-4 h-4 rounded-full bg-blue-500 dark:bg-blue-700 shadow-md transform -rotate-12"></div>
        <span class="text-gray-700 dark:text-gray-300">Design Phase</span>
      </div>
      <div class="flex items-center space-x-2 justify-end">
        <span class="text-gray-700 dark:text-gray-300">90%</span>
        <div class="w-4 h-4 rounded-full bg-blue-400 dark:bg-blue-600 shadow-md transform rotate-12"></div>
      </div>

      <div class="flex items-center space-x-2">
        <div class="w-4 h-4 rounded-full bg-blue-500 dark:bg-blue-700 shadow-md transform -rotate-12"></div>
        <span class="text-gray-700 dark:text-gray-300">Development</span>
      </div>
      <div class="flex items-center space-x-2 justify-end">
        <span class="text-gray-700 dark:text-gray-300">70%</span>
        <div class="w-4 h-4 rounded-full bg-blue-400 dark:bg-blue-600 shadow-md transform rotate-12"></div>
      </div>

      <div class="flex items-center space-x-2">
        <div class="w-4 h-4 rounded-full bg-blue-500 dark:bg-blue-700 shadow-md transform -rotate-12"></div>
        <span class="text-gray-700 dark:text-gray-300">Testing</span>
      </div>
      <div class="flex items-center space-x-2 justify-end">
        <span class="text-gray-700 dark:text-gray-300">50%</span>
        <div class="w-4 h-4 rounded-full bg-blue-400 dark:bg-blue-600 shadow-md transform rotate-12"></div>
      </div>
    </div>

    <div class="mt-8 text-center">
      <button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white font-bold py-2 px-6 rounded-full 
                     shadow-lg hover:shadow-xl active:shadow-inner-lg transition-all duration-200
                     dark:bg-blue-700 dark:hover:bg-blue-800 dark:active:bg-blue-900">
        View Details
      </button>
    </div>
  </div>
</div>

<style>
  /* Custom Utility Classes for Skeuomorphism */
  .shadow-2xl-inner {
    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.2), inset -5px -5px 10px rgba(255, 255, 255, 0.5);
  }
  .dark .shadow-2xl-inner {
    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5), inset -5px -5px 10px rgba(255, 255, 255, 0.1);
  }

  .shadow-inner-lg {
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.2), inset -3px -3px 6px rgba(255, 255, 255, 0.5);
  }
  .dark .shadow-inner-lg {
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.4), inset -3px -3px 6px rgba(255, 255, 255, 0.1);
  }

  .drop-shadow-md {
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
  }
</style>

Triadic Dark Mode Progress Bar

A simple and triadic-colored progress bar component for dark mode, suitable for blogs and content consumption. It features a responsive design with Tailwind CSS, utilizing the dark: prefix for dark theme support without JavaScript.

Open Preview

                <div class="dark:bg-gray-900 p-4">
  <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Reading Progress</h2>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4">
    <div class="dark:bg-purple-500 h-2.5 rounded-full" style="width: 45%;"></div>
  </div>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4">
    <div class="dark:bg-yellow-500 h-2.5 rounded-full" style="width: 60%;"></div>
  </div>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
    <div class="dark:bg-emerald-500 h-2.5 rounded-full" style="width: 75%;"></div>
  </div>
</div>

Progress Bar Component

A responsive progress bar component designed in Material Design style, incorporating pastel color schemes for portfolio showcases. It supports dark mode.

Open Preview

                <div class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-xl font-semibold mb-2 text-gray-700 dark:text-gray-200">Project Progress</h2>
    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full">
        <div class="bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 h-4 rounded-full" style="width: 70%;"></div>
    </div>
    <div class="flex justify-between w-full mt-2 text-xs text-gray-600 dark:text-gray-400">
        <span>0%</span>
        <span>70%</span>
        <span>100%</span>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/100/100" alt="Project Screenshot" class="rounded-lg shadow-md"> 
    </div>
    <div class="mt-2 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
        <span class="text-gray-700 dark:text-gray-200">Reviewed by John Doe</span>
    </div>
</div>

Search Components

Categories

Progress Bar