CCHub Logo CCHub Tailwind Collection
Komponenten Fortschrittsindikatoren Komponente "Fortschrittsindikatoren"

Komponente "Fortschrittsindikatoren"

Eine Komponente für Fortschrittsindikatoren im 3D-Designstil mit Graustufen-Farbschema für den Konsum von Blog-Inhalten, mit responsivem Design und Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Progress Indicators</h2>
    <div class="relative w-full max-w-md">
        <div class="flex items-center justify-between mb-2">
            <span class="text-gray-600 dark:text-gray-400">Step 1</span>
            <span class="text-gray-600 dark:text-gray-400">20%</span>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-full h-4">
            <div class="bg-gray-800 dark:bg-gray-300 h-4 rounded-full" style="width: 20%;"></div>
        </div>
    </div>
    <div class="relative w-full max-w-md mt-4">
        <div class="flex items-center justify-between mb-2">
            <span class="text-gray-600 dark:text-gray-400">Step 2</span>
            <span class="text-gray-600 dark:text-gray-400">50%</span>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-full h-4">
            <div class="bg-gray-800 dark:bg-gray-300 h-4 rounded-full" style="width: 50%;"></div>
        </div>
    </div>
    <div class="relative w-full max-w-md mt-4">
        <div class="flex items-center justify-between mb-2">
            <span class="text-gray-600 dark:text-gray-400">Step 3</span>
            <span class="text-gray-600 dark:text-gray-400">80%</span>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-full h-4">
            <div class="bg-gray-800 dark:bg-gray-300 h-4 rounded-full" style="width: 80%;"></div>
        </div>
    </div>
    <div class="relative w-full max-w-md mt-4">
        <div class="flex items-center justify-between mb-2">
            <span class="text-gray-600 dark:text-gray-400">Step 4</span>
            <span class="text-gray-600 dark:text-gray-400">100%</span>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-full h-4">
            <div class="bg-gray-800 dark:bg-gray-300 h-4 rounded-full" style="width: 100%;"></div>
        </div>
    </div>
    <div class="mt-6">
        <img src="https://picsum.photos/200/100?random=1" alt="Content Image" class="rounded-md shadow-md">
    </div>
    <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-500 dark:border-gray-300"> 
        <span class="ml-2 text-gray-800 dark:text-white">Author Name</span>
    </div>
</div>

Verwandte Komponenten

Komponente "Fortschrittsindikatoren"

Eine Komponente zur Fortschrittsanzeige im Stil eines Glasmorphismus für Social-Media-Anwendungen mit mattglasähnlichen, durchscheinenden Elementen mit Unschärfeeffekten. Es verwendet ein analoges Farbschema und bietet eine komplexe, reichhaltige Benutzeroberfläche mit mehreren interaktiven Elementen. Die Komponente ist responsiv und unterstützt ein dunkles Theme mit Tailwind CSS.

Offen

Komponente "Glassmorphism-Fortschrittsindikatoren"

Glassmorphism Progress Indicators Komponente mit lebendigem Farbschema und einfacher Komplexität.

Offen

Komponente "Fortschrittsindikatoren"

Eine einfache Komponente der Fortschrittsindikatoren, die von der Retro-/Vintage-Ästhetik der 80er und 90er Jahre inspiriert ist und ein komplementäres Farbschema verwendet. Entwickelt für Social-Media-Schnittstellen und reaktionsschnell mit Unterstützung für dunkle Themen.

Offen