Composants Barre de progression Barre de progression du mode sombre

Barre de progression du mode sombre

Un composant de barre de progression réactif conçu pour le mode sombre à l’aide de Tailwind CSS, avec un design élégant et la prise en charge du thème sombre.

Aperçu

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>

Composants associés

Composant de la barre de progression

Un composant de barre de progression complexe et réactif pour les services gouvernementaux/publics, avec un design épuré et minimaliste avec une palette monochrome et des accents lumineux, la prise en charge du mode sombre et des informations détaillées sur la progression.

Ouvrir

Composant de la barre de progression

Un composant de barre de progression réactif conçu pour le mode sombre, à l’aide de Tailwind CSS.

Ouvrir

Barre de progression Glassmorphism

Barre de progression de style Glassmorphism conçue pour les interfaces de médias sociaux, avec des couleurs vives et la prise en charge du mode sombre. Mise en page simple sans JavaScript.

Ouvrir