Komponente "Fortschrittsindikatoren"
Eine Komponente mit Fortschrittsindikatoren im brutalistischen Stil mit hohem Kontrast, die Arbeiten oder Produkte in einem Portfolio präsentiert. Es verfügt über eine reichhaltige Benutzeroberfläche mit mehreren interaktiven Elementen, die so konzipiert sind, dass sie mit Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS reaktionsschnell sind.
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>Verwandte Komponenten
Komponente "Fortschrittsindikatoren"
Eine Komponente für die Fortschrittsanzeige mit einem glassmorphism-Stil, responsivem Design und Unterstützung für dunkle Designs. Verwendet Tailwind CSS für das Styling.
Komponente "Fortschrittsindikatoren"
Eine komplexe, monochromatische Komponente für Fortschrittsindikatoren zum Thema Social Media mit Benutzeroberfläche im Dunkelmodus, mit mehreren Fortschrittsbalken, Aktivitäts-Feed und Benutzer-Avataren.
Komponente "Fortschrittsindikatoren"
Eine Komponente für Fortschrittsindikatoren im Retro-/Vintage-Stil, die Tailwind CSS mit responsiven Effekten und Unterstützung für dunkle Themen verwendet.