Komponente "Fortschrittsindikatoren"
Eine einfache Komponente der Fortschrittsindikatoren, die von der Retro-/Vintage-Ästhetik der 80er und 90er Jahre inspiriert ist und ein komplementäres Farbschema verwendet. Entwickelt für Social-Media-Schnittstellen und reaktionsschnell mit Unterstützung für dunkle Themen.
HTML-Code
<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>Verwandte Komponenten
Komponente "Fortschrittsindikatoren"
Ein einfacher Fortschrittsindikator mit einem Glasmorphismus-Effekt, der für E-Commerce-Websites mit Unterstützung des Dunkelmodus und einem monochromatischen Farbschema geeignet ist.
Komponente der 3D-Fortschrittsleiste
Gestaltet mit 3D-Effekten, Tailwind CSS, responsivem Design und Unterstützung für den Dunkelmodus.
Komponente "Fortschrittsindikatoren"
Hierbei handelt es sich um eine Fortschrittsanzeigekomponente im Stil von Material Design, die Tailwind CSS verwendet, mit responsiven Effekten und Unterstützung für dunkle Themen.