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.
HTML Code
<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>Related Components
Progress Indicators Component 33
A responsive progress indicator with microinteractions in Tailwind CSS, featuring dark theme support.
Progress Indicators Component
A 3D design style progress indicators component with grayscale color scheme for blog content consumption, featuring responsive design and dark mode support.
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.