CCHub Logo CCHub Tailwind Collection
Komponenten Fortschrittsindikatoren Komponente "Fortschrittsindikatoren"

Komponente "Fortschrittsindikatoren"

Ein einfacher Fortschrittsindikator mit einem Glasmorphismus-Effekt, der für E-Commerce-Websites mit Unterstützung des Dunkelmodus und einem monochromatischen Farbschema geeignet ist.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center p-5 bg-white bg-opacity-30 backdrop-blur-sm dark:bg-gray-800 dark:bg-opacity-30 rounded-lg">
    <h1 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Order Progress</h1>
    <div class="w-full mx-auto">
        <!-- Progress Bar -->
        <div class="relative pt-1">
            <div class="flex mb-2 items-center justify-between">
                <div class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-800 dark:text-white bg-blue-200 dark:bg-blue-600">
                    1. Add to Cart
                </div>
                <div class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-800 dark:text-white bg-blue-200 dark:bg-blue-600">
                    2. Checkout
                </div>
                <div class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-800 dark:text-white bg-blue-200 dark:bg-blue-600">
                    3. Payment
                </div>
            </div>
            <div class="flex h-2 mb-4 rounded bg-gray-300 dark:bg-gray-600">
                <div class="w-1/3 h-full bg-blue-600 dark:bg-blue-300"></div>
            </div>
        </div>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full">
    </div>
    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Estimated delivery: 3-5 business days</p>
</div>

Verwandte Komponenten

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

Komponente "Fortschrittsindikatoren"

Eine von Material Design inspirierte Komponente für Fortschrittsindikatoren mit responsiven Effekten und Unterstützung für dunkle Themen, die mit Tailwind CSS erstellt wurde.

Offen

Komponente "Fortschrittsindikatoren"

Eine Komponente für die Fortschrittsanzeige mit einem glassmorphism-Stil, responsivem Design und Unterstützung für dunkle Designs. Verwendet Tailwind CSS für das Styling.

Offen