CCHub Logo CCHub Tailwind Collection
Komponenten Fortschrittsbalken Fortschrittsbalken für den Dunkelmodus

Fortschrittsbalken für den Dunkelmodus

Eine reaktionsschnelle Fortschrittsleisten-Komponente, die für den Dunkelmodus mit Tailwind CSS entwickelt wurde, mit einem schlanken Design und Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<div class="bg-gray-800 rounded-lg p-4 w-full">
    <h3 class="text-white text-lg font-semibold mb-2">Progress Bar</h3>
    <div class="relative pt-1">
        <div class="flex mb-2 items-center justify-between">
            <div>
                <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200">
                    70%
                </span>
            </div>
            <div class="text-right">
                <span class="text-xs font-semibold inline-block text-teal-600">
                    Completed
                </span>
            </div>
        </div>
        <div class="flex h-2 mb-4 rounded bg-gray-700">
            <div class="w-7/12 h-full bg-teal-600 rounded"></div>
        </div>
    </div>
    <div class="mt-2 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-600 mr-2">
        <span class="text-white text-sm">John Doe</span>
    </div>
</div>

Verwandte Komponenten

Fortschrittsbalken für Neumorphismus

Eine reaktionsschnelle Fortschrittsbalkenkomponente im Neumorphismus-Stil, die für Dashboards entwickelt wurde, eine interaktive Funktion enthält und den Dunkelmodus unterstützt.

Offen

Komponente der Fortschrittsleiste

Eine einfache Fortschrittsbalkenkomponente im Stil eines brutalistischen Designs mit einem Graustufen-Farbschema für E-Commerce-Anwendungen. Es ist reaktionsschnell und unterstützt den Dunkelmodus.

Offen

Material Design Erdiger Fortschrittsbalken

Ein vom Material Design inspirierter Fortschrittsbalken mit Erdtönen, der sich für Social-Media-Schnittstellen eignet. Es ist reaktionsschnell und bietet Unterstützung für den Dunkelmodus mit Tailwind CSS.

Offen