CCHub Logo CCHub Tailwind Collection
Komponenten Fortschrittsindikatoren Komponente "Fortschrittsindikatoren"

Komponente "Fortschrittsindikatoren"

Eine reaktionsschnelle Komponente für Fortschrittsindikatoren im Glasmorphismus-Stil mit mattglasähnlichen durchscheinenden Elementen und Unschärfeeffekten, die dunkle Themen mit Tailwind CSS unterstützen.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
    <div class="bg-white bg-opacity-20 backdrop-blur-lg border border-white border-opacity-30 rounded-lg shadow-lg p-6 max-w-md w-full">
        <h2 class="text-center text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Progress Indicators</h2>
        <div class="w-full mb-4">
            <div class="flex justify-between mb-1">
                <span class="text-sm text-gray-700 dark:text-gray-300">Task 1</span>
                <span class="text-sm text-gray-700 dark:text-gray-300">75%</span>
            </div>
            <div class="bg-gray-300 rounded-full h-2.5 dark:bg-gray-700">
                <div class="bg-blue-600 h-2.5 rounded-full" style="width: 75%"></div>
            </div>
        </div>
        <div class="w-full mb-4">
            <div class="flex justify-between mb-1">
                <span class="text-sm text-gray-700 dark:text-gray-300">Task 2</span>
                <span class="text-sm text-gray-700 dark:text-gray-300">50%</span>
            </div>
            <div class="bg-gray-300 rounded-full h-2.5 dark:bg-gray-700">
                <div class="bg-green-600 h-2.5 rounded-full" style="width: 50%"></div>
            </div>
        </div>
        <div class="w-full mb-4">
            <div class="flex justify-between mb-1">
                <span class="text-sm text-gray-700 dark:text-gray-300">Task 3</span>
                <span class="text-sm text-gray-700 dark:text-gray-300">25%</span>
            </div>
            <div class="bg-gray-300 rounded-full h-2.5 dark:bg-gray-700">
                <div class="bg-red-600 h-2.5 rounded-full" style="width: 25%"></div>
            </div>
        </div>
        <div class="flex items-center justify-between mt-4">
            <img src="https://picsum.photos/50" alt="Placeholder Image" class="rounded-full">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full">
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente "Fortschrittsindikatoren"

Eine Komponente mit Fortschrittsindikatoren im brutalistischen Stil mit hohem Kontrast, die Arbeiten oder Produkte in einem Portfolio präsentiert. Es verfügt über eine reichhaltige Benutzeroberfläche mit mehreren interaktiven Elementen, die so konzipiert sind, dass sie mit Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS reaktionsschnell sind.

Offen

Komponente der 3D-Fortschrittsleiste

Gestaltet mit 3D-Effekten, Tailwind CSS, responsivem Design und Unterstützung für den Dunkelmodus.

Offen

Komponente "Fortschrittsindikatoren"

Eine reaktionsschnelle Komponente für Fortschrittsindikatoren, die für ein UI-Dashboard im Dunkelmodus mit einem analogen Farbschema entwickelt wurde. Es enthält verschiedene Fortschrittsindikatoren wie Balken, Kreise und einen Aktivitäts-Feed, die alle mit Tailwind CSS für die Unterstützung des Dunkelmodus gestaltet sind. Es wird kein JavaScript verwendet.

Offen