Komponente der 3D-Fortschrittsleiste
Eine reaktionsschnelle Fortschrittsleisten-Komponente, die für Social-Networking-Schnittstellen entwickelt wurde, mit 3D-Effekt, monochromatischem Farbschema und Unterstützung für den Dunkelmodus, die mit Tailwind CSS erstellt wurde.
HTML-Code
<div class="flex flex-col items-center py-10">
<div class="w-full max-w-md">
<div class="flex justify-between mb-2">
<span class="text-gray-700 dark:text-gray-300">Progress</span>
<span class="text-gray-700 dark:text-gray-300">75%</span>
</div>
<div class="relative bg-gray-200 dark:bg-gray-700 rounded-full h-4">
<div class="absolute bg-blue-600 dark:bg-blue-300 h-full rounded-full transition-all duration-300 ease-in-out" style="width: 75%; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2), 0px 0px 15px rgba(0, 0, 0, 0.2);"></div>
</div>
</div>
<div class="flex justify-center mt-4">
<img src="https://picsum.photos/50/50" alt="Progress Image" class="rounded-full border border-gray-300 dark:border-gray-600 shadow-md">
</div>
<div class="mt-2 text-gray-500 dark:text-gray-400 text-sm">Some description about the progress being tracked.</div>
</div>Verwandte Komponenten
Komponente der Fortschrittsleiste
Eine komplexe, reaktionsschnelle Fortschrittsleistenkomponente für Behörden/öffentliche Dienste mit einem klaren, minimalistischen Design mit monochromer Farbpalette und hellem Akzent, Unterstützung für den Dunkelmodus und detaillierten Fortschrittsinformationen.
Komponente der Fortschrittsleiste
Eine reaktionsschnelle Fortschrittsleisten-Komponente, die mit Blick auf den Dunkelmodus entwickelt wurde und Tailwind CSS verwendet.
Minimalistischer triadischer Fortschrittsbalken
Ein minimalistischer, reaktionsschneller Fortschrittsbalken mit triadischem Farbschema und Unterstützung für dunkle Themen, geeignet für Social-Media-Anwendungen.