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

Komponente der Fortschrittsleiste

Eine reaktionsschnelle Fortschrittsleisten-Komponente, die für den Dunkelmodus mit einem pastellfarbenen Farbschema entwickelt wurde und für Geschäfts-/Unternehmenswebsites geeignet ist.

Offen

Triadischer Fortschrittsbalken für den Dunkelmodus

Eine einfache und dreifarbige Fortschrittsbalkenkomponente für den Dunkelmodus, die für Blogs und den Konsum von Inhalten geeignet ist. Es verfügt über ein responsives Design mit Tailwind CSS, das das Präfix dark: für die Unterstützung dunkler Themen ohne JavaScript verwendet.

Offen

Minimalistischer triadischer Fortschrittsbalken

Ein minimalistischer, reaktionsschneller Fortschrittsbalken mit triadischem Farbschema und Unterstützung für dunkle Themen, geeignet für Social-Media-Anwendungen.

Offen