CCHub Logo CCHub Tailwind Collection
Komponenten Fortschrittsbalken Komponente des Fortschrittsbalkens im Dunkelmodus

Komponente des Fortschrittsbalkens im Dunkelmodus

Eine reaktionsschnelle Fortschrittsbalkenkomponente im Dunkelmodus für Geschäfts-/Unternehmenswebsites mit leuchtenden Farben und interaktiven Elementen.

Vorschau

HTML-Code 

<div class="p-6 max-w-md mx-auto bg-gray-800 rounded-xl shadow-md space-y-4">
    <h2 class="text-2xl font-bold text-white text-center">Progress Tracker</h2>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 1</span>
        <span class="text-sm text-gray-400">75%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-green-500 h-4 rounded-full" style="width: 75%;"></div>
    </div>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 2</span>
        <span class="text-sm text-gray-400">50%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-yellow-500 h-4 rounded-full" style="width: 50%;"></div>
    </div>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 3</span>
        <span class="text-sm text-gray-400">30%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-red-500 h-4 rounded-full" style="width: 30%;"></div>
    </div>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 4</span>
        <span class="text-sm text-gray-400">10%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-blue-500 h-4 rounded-full" style="width: 10%;"></div>
    </div>
</div>

Verwandte Komponenten

Komponente der Fortschrittsleiste

Eine reaktionsschnelle Fortschrittsbalken-Komponente, die im Material Design-Stil gestaltet wurde und pastellfarbene Farbschemata für Portfolio-Vitrinen enthält. Es 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

Komponente der Fortschrittsleiste

Eine reaktionsschnelle Fortschrittsleisten-Komponente, die mit Blick auf den Dunkelmodus entwickelt wurde und Tailwind CSS verwendet.

Offen