Volet Indicateurs de progrès
Un composant complexe et monochrome sur le thème des réseaux sociaux avec une interface utilisateur en mode sombre, avec plusieurs barres de progression, un flux d’activité et des avatars d’utilisateurs.
HTML Code
<div class="min-h-screen bg-gray-950 p-4 sm:p-8 flex items-center justify-center font-sans dark:bg-gray-950">
<div class="w-full max-w-4xl bg-gray-900 rounded-lg shadow-xl overflow-hidden dark:bg-gray-900">
<div class="p-6 sm:p-8 border-b border-gray-800 dark:border-gray-800">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-100 mb-2 dark:text-gray-100">Your Social Progress</h2>
<p class="text-gray-400 text-sm sm:text-base dark:text-gray-400">Track your engagement and reach milestones.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6 sm:p-8">
<!-- Engagement Progress -->
<div class="bg-gray-850 p-5 rounded-lg dark:bg-gray-850">
<h3 class="text-lg font-semibold text-gray-100 mb-3 dark:text-gray-100">Engagement Level</h3>
<div class="w-full bg-gray-700 rounded-full h-3 dark:bg-gray-700">
<div class="bg-blue-600 h-3 rounded-full" style="width: 75%;"></div>
</div>
<p class="text-sm text-gray-400 mt-2 dark:text-gray-400">75% Towards 'Influencer' Tier</p>
<div class="flex justify-between items-center text-gray-500 text-xs mt-3 dark:text-gray-500">
<span>Points: 750/1000</span>
<span>Next: 250</span>
</div>
</div>
<!-- Post Reach Progress -->
<div class="bg-gray-850 p-5 rounded-lg dark:bg-gray-850">
<h3 class="text-lg font-semibold text-gray-100 mb-3 dark:text-gray-100">Post Reach</h3>
<div class="w-full bg-gray-700 rounded-full h-3 dark:bg-gray-700">
<div class="bg-purple-600 h-3 rounded-full" style="width: 60%;"></div>
</div>
<p class="text-sm text-gray-400 mt-2 dark:text-gray-400">60% of Monthly Target</p>
<div class="flex justify-between items-center text-gray-500 text-xs mt-3 dark:text-gray-500">
<span>Reached: 12K/20K</span>
<span>Remaining: 8K</span>
</div>
</div>
<!-- Profile Completion Progress -->
<div class="bg-gray-850 p-5 rounded-lg dark:bg-gray-850">
<h3 class="text-lg font-semibold text-gray-100 mb-3 dark:text-gray-100">Profile Completion</h3>
<div class="w-full bg-gray-700 rounded-full h-3 dark:bg-gray-700">
<div class="bg-green-600 h-3 rounded-full" style="width: 90%;"></div>
</div>
<p class="text-sm text-gray-400 mt-2 dark:text-gray-400">Almost perfect! Add a bio.</p>
<div class="flex justify-between items-center text-gray-500 text-xs mt-3 dark:text-gray-500">
<span>Complete: 9/10 fields</span>
<span>Missing: 1</span>
</div>
</div>
</div>
<div class="p-6 sm:p-8 bg-gray-900 border-t border-gray-800 dark:bg-gray-900 dark:border-gray-800">
<h3 class="text-xl font-semibold text-gray-100 mb-4 dark:text-gray-100">Recent Activity</h3>
<ul class="space-y-4">
<!-- Activity Item 1 -->
<li class="flex items-start">
<img class="w-10 h-10 rounded-full mr-3 border-2 border-gray-700 dark:border-gray-700" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
<div>
<p class="text-gray-200 text-sm dark:text-gray-200"><strong class="text-gray-50">Alex Johnson</strong> liked your post "Summer Vibes".</p>
<span class="text-gray-500 text-xs dark:text-gray-500">2 hours ago</span>
</div>
</li>
<!-- Activity Item 2 -->
<li class="flex items-start">
<img class="w-10 h-10 rounded-full mr-3 border-2 border-gray-700 dark:border-gray-700" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
<div>
<p class="text-gray-200 text-sm dark:text-gray-200"><strong class="text-gray-50">Maria T.</strong> commented on your photo.</p>
<span class="text-gray-500 text-xs dark:text-gray-500">5 hours ago</span>
</div>
</li>
<!-- Activity Item 3 -->
<li class="flex items-start">
<img class="w-10 h-10 rounded-full mr-3 border-2 border-gray-700 dark:border-gray-700" src="https://randomuser.me/api/portraits/men/21.jpg" alt="User Avatar">
<div>
<p class="text-gray-200 text-sm dark:text-gray-200"><strong class="text-gray-50">David K.</strong> started following you.</p>
<span class="text-gray-500 text-xs dark:text-gray-500">1 day ago</span>
</div>
</li>
</ul>
</div>
<div class="p-6 sm:p-8 border-t border-gray-800 bg-gray-900 text-center dark:bg-gray-900 dark:border-gray-800">
<button class="bg-blue-700 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg text-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors duration-200 dark:bg-blue-700 dark:hover:bg-blue-600">
View Detailed Analytics
</button>
</div>
</div>
</div>Composants associés
Volet Indicateurs de progrès
Un composant d’indicateurs de progression inspiré de Material Design avec des effets réactifs et la prise en charge du thème sombre, construit à l’aide de Tailwind CSS.
Volet Indicateurs de progrès
Un composant d’indicateurs de progression de style rétro/vintage avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Indicateurs de progrès Composante 33
Un indicateur de progression réactif avec des micro-interactions dans Tailwind CSS, avec prise en charge du thème sombre.