Progress Indicators Component
A minimalist progress indicator component designed to showcase portfolio progress using vibrant colors and responsive design with dark theme support.
HTML Code
<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>Related Components
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.
Progress Indicators Component
A simple progress indicator designed with a glassmorphism effect, suitable for e-commerce websites with dark mode support and a monochromatic color scheme.
Progress Indicators Component
A neumorphic styled progress indicator suitable for social media interfaces, featuring a simple layout and responsive design with dark mode support.