Skeuomorphic_Vibrant_Business_Dashboard
Un composant de tableau de bord complexe, réactif et skeuomorphe aux couleurs vives, conçu pour une utilisation professionnelle/d’entreprise, avec des visualisations de données et des éléments interactifs avec prise en charge du mode sombre.
HTML Code
<div class="min-h-screen bg-gradient-to-br from-gray-100 to-gray-300 p-4 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 font-sans text-gray-800 dark:text-gray-200">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Main Metrics Panel -->
<div class="lg:col-span-2 bg-gradient-to-br from-gray-200 to-gray-400 p-6 rounded-3xl shadow-xl border-t border-l border-white/50 dark:from-gray-800 dark:to-gray-900 dark:border-gray-700/50 transform transition-all duration-300 hover:shadow-2xl hover:scale-[1.01]">
<h2 class="text-3xl font-extrabold text-blue-800 dark:text-blue-400 mb-6 drop-shadow-md">Business Overview Dashboard</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Metric Card 1 -->
<div class="bg-gradient-to-br from-indigo-300 to-indigo-500 p-5 rounded-2xl shadow-lg border-t border-l border-white/70 dark:from-indigo-700 dark:to-indigo-900 dark:border-indigo-600/70 transform scale-[0.98] transition-all duration-200 hover:scale-[1.0] hover:shadow-xl cursor-pointer">
<div class="flex items-center justify-between mb-3">
<p class="text-white text-md uppercase font-semibold">Total Revenue</p>
<svg class="h-6 w-6 text-white opacity-80" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
</div>
<p class="text-4xl font-bold text-white mb-2 drop-shadow-md">$1.2M</p>
<p class="text-sm text-white opacity-80">+12% from last month</p>
</div>
<!-- Metric Card 2 -->
<div class="bg-gradient-to-br from-green-300 to-green-500 p-5 rounded-2xl shadow-lg border-t border-l border-white/70 dark:from-green-700 dark:to-green-900 dark:border-green-600/70 transform scale-[0.98] transition-all duration-200 hover:scale-[1.0] hover:shadow-xl cursor-pointer">
<div class="flex items-center justify-between mb-3">
<p class="text-white text-md uppercase font-semibold">New Customers</p>
<svg class="h-6 w-6 text-white opacity-80" fill="currentColor" viewBox="0 0 20 20"><path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zm-6 9A4 4 0 013 11a1 1 0 10-2 0 6 6 0 006 6h6a6 6 0 006-6 1 1 0 10-2 0 4 4 0 01-4 4H7z"></path></svg>
</div>
<p class="text-4xl font-bold text-white mb-2 drop-shadow-md">2,450</p>
<p class="text-sm text-white opacity-80">+8% from last week</p>
</div>
<!-- Metric Card 3 -->
<div class="bg-gradient-to-br from-red-300 to-red-500 p-5 rounded-2xl shadow-lg border-t border-l border-white/70 dark:from-red-700 dark:to-red-900 dark:border-red-600/70 transform scale-[0.98] transition-all duration-200 hover:scale-[1.0] hover:shadow-xl cursor-pointer">
<div class="flex items-center justify-between mb-3">
<p class="text-white text-md uppercase font-semibold">Churn Rate</p>
<svg class="h-6 w-6 text-white opacity-80" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>
</div>
<p class="text-4xl font-bold text-white mb-2 drop-shadow-md">4.5%</p>
<p class="text-sm text-white opacity-80">-1% from last month</p>
</div>
<!-- Metric Card 4 -->
<div class="bg-gradient-to-br from-purple-300 to-purple-500 p-5 rounded-2xl shadow-lg border-t border-l border-white/70 dark:from-purple-700 dark:to-purple-900 dark:border-purple-600/70 transform scale-[0.98] transition-all duration-200 hover:scale-[1.0] hover:shadow-xl cursor-pointer">
<div class="flex items-center justify-between mb-3">
<p class="text-white text-md uppercase font-semibold">Active Users</p>
<svg class="h-6 w-6 text-white opacity-80" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
</div>
<p class="text-4xl font-bold text-white mb-2 drop-shadow-md">18,700</p>
<p class="text-sm text-white opacity-80">+5% from yesterday</p>
</div>
</div>
<!-- Chart Placeholder -->
<div class="mt-8 bg-gray-50/70 dark:bg-gray-700/70 rounded-2xl p-6 shadow-inset shadow-md dark:shadow-sm border border-gray-300 dark:border-gray-600 transform transition-all duration-300 hover:scale-[1.005]">
<h3 class="text-xl font-bold text-gray-700 dark:text-gray-300 mb-4">Monthly Performance</h3>
<img src="https://picsum.photos/800/300?random=1" alt="Placeholder Chart" class="w-full rounded-lg shadow-inner border border-gray-200 dark:border-gray-600" />
<p class="text-sm text-gray-500 dark:text-gray-400 mt-3">This chart represents the projected growth and actual performance over the last 12 months.</p>
</div>
</div>
<!-- Recent Activities Panel -->
<div class="bg-gradient-to-br from-gray-200 to-gray-400 p-6 rounded-3xl shadow-xl border-t border-l border-white/50 dark:from-gray-800 dark:to-gray-900 dark:border-gray-700/50 transform transition-all duration-300 hover:shadow-2xl hover:scale-[1.01]">
<h2 class="text-3xl font-extrabold text-teal-800 dark:text-teal-400 mb-6 drop-shadow-md">Recent Activities</h2>
<ul class="space-y-4">
<!-- Activity Item 1 -->
<li class="flex items-center space-x-4 bg-gray-50/70 p-4 rounded-2xl shadow-inner dark:bg-gray-700/70 border border-gray-300 dark:border-gray-600 transform transition-all duration-200 hover:scale-[1.02] hover:bg-white/80 dark:hover:bg-gray-600/80 cursor-pointer">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-green-500 shadow-md" />
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200">John Doe <span class="text-green-600 dark:text-green-400">completed task</span> 'Project X launch'</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Just now</p>
</div>
</li>
<!-- Activity Item 2 -->
<li class="flex items-center space-x-4 bg-gray-50/70 p-4 rounded-2xl shadow-inner dark:bg-gray-700/70 border border-gray-300 dark:border-gray-600 transform transition-all duration-200 hover:scale-[1.02] hover:bg-white/80 dark:hover:bg-gray-600/80 cursor-pointer">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-purple-500 shadow-md" />
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith <span class="text-purple-600 dark:text-purple-400">updated report</span> 'Q3 Financials'</p>
<p class="text-sm text-gray-600 dark:text-gray-400">15 minutes ago</p>
</div>
</li>
<!-- Activity Item 3 -->
<li class="flex items-center space-x-4 bg-gray-50/70 p-4 rounded-2xl shadow-inner dark:bg-gray-700/70 border border-gray-300 dark:border-gray-600 transform transition-all duration-200 hover:scale-[1.02] hover:bg-white/80 dark:hover:bg-gray-600/80 cursor-pointer">
<img src="https://randomuser.me/api/portraits/men/67.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-red-500 shadow-md" />
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200">Mike Ross <span class="text-red-600 dark:text-red-400">added new lead</span> 'Acme Corp.' to CRM</p>
<p class="text-sm text-gray-600 dark:text-gray-400">30 minutes ago</p>
</div>
</li>
<!-- Activity Item 4 -->
<li class="flex items-center space-x-4 bg-gray-50/70 p-4 rounded-2xl shadow-inner dark:bg-gray-700/70 border border-gray-300 dark:border-gray-600 transform transition-all duration-200 hover:scale-[1.02] hover:bg-white/80 dark:hover:bg-gray-600/80 cursor-pointer">
<img src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500 shadow-md" />
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200">Sarah Lee <span class="text-blue-600 dark:text-blue-400">scheduled meeting</span> 'Team Sync'</p>
<p class="text-sm text-gray-600 dark:text-gray-400">1 hour ago</p>
</div>
</li>
</ul>
</div>
<!-- Sales Funnel Panel -->
<div class="bg-gradient-to-br from-gray-200 to-gray-400 p-6 rounded-3xl shadow-xl border-t border-l border-white/50 dark:from-gray-800 dark:to-gray-900 dark:border-gray-700/50 transform transition-all duration-300 hover:shadow-2xl hover:scale-[1.01]">
<h2 class="text-3xl font-extrabold text-orange-800 dark:text-orange-400 mb-6 drop-shadow-md">Sales Funnel Progress</h2>
<div class="space-y-4">
<!-- Stage 1 -->
<div class="flex items-center justify-between bg-gray-50/70 p-4 rounded-2xl shadow-inner dark:bg-gray-700/70 border border-gray-300 dark:border-gray-600 transform transition-all duration-200 hover:scale-[1.02] hover:bg-white/80 dark:hover:bg-gray-600/80 cursor-pointer">
<span class="text-gray-700 dark:text-gray-300 font-semibold">Leads:</span>
<div class="w-2/3 bg-gray-300 dark:bg-gray-600 rounded-full h-4 relative overflow-hidden shadow-inner">
<div class="bg-orange-500 h-4 rounded-full" style="width: 90%"></div>
<span class="absolute right-2 top-0 text-xs font-bold text-white leading-loose drop-shadow-sm">90%</span>
</div>
</div>
<!-- Stage 2 -->
<div class="flex items-center justify-between bg-gray-50/70 p-4 rounded-2xl shadow-inner dark:bg-gray-700/70 border border-gray-300 dark:border-gray-600 transform transition-all duration-200 hover:scale-[1.02] hover:bg-white/80 dark:hover:bg-gray-600/80 cursor-pointer">
<span class="text-gray-700 dark:text-gray-300 font-semibold">Engaged:</span>
<div class="w-2/3 bg-gray-300 dark:bg-gray-600 rounded-full h-4 relative overflow-hidden shadow-inner">
<div class="bg-orange-500 h-4 rounded-full" style="width: 70%"></div>
<span class="absolute right-2 top-0 text-xs font-bold text-white leading-loose drop-shadow-sm">70%</span>
</div>
</div>
<!-- Stage 3 -->
<div class="flex items-center justify-between bg-gray-50/70 p-4 rounded-2xl shadow-inner dark:bg-gray-700/70 border border-gray-300 dark:border-gray-600 transform transition-all duration-200 hover:scale-[1.02] hover:bg-white/80 dark:hover:bg-gray-600/80 cursor-pointer">
<span class="text-gray-700 dark:text-gray-300 font-semibold">Proposals:</span>
<div class="w-2/3 bg-gray-300 dark:bg-gray-600 rounded-full h-4 relative overflow-hidden shadow-inner">
<div class="bg-orange-500 h-4 rounded-full" style="width: 50%"></div>
<span class="absolute right-2 top-0 text-xs font-bold text-white leading-loose drop-shadow-sm">50%</span>
</div>
</div>
<!-- Stage 4 -->
<div class="flex items-center justify-between bg-gray-50/70 p-4 rounded-2xl shadow-inner dark:bg-gray-700/70 border border-gray-300 dark:border-gray-600 transform transition-all duration-200 hover:scale-[1.02] hover:bg-white/80 dark:hover:bg-gray-600/80 cursor-pointer">
<span class="text-gray-700 dark:text-gray-300 font-semibold">Closed Won:</span>
<div class="w-2/3 bg-gray-300 dark:bg-gray-600 rounded-full h-4 relative overflow-hidden shadow-inner">
<div class="bg-orange-500 h-4 rounded-full" style="width: 30%"></div>
<span class="absolute right-2 top-0 text-xs font-bold text-white leading-loose drop-shadow-sm">30%</span>
</div>
</div>
<!-- Chart Placeholder -->
<div class="mt-6 bg-gray-50/70 dark:bg-gray-700/70 rounded-2xl p-6 shadow-inset shadow-md dark:shadow-sm border border-gray-300 dark:border-gray-600 transform transition-all duration-300 hover:scale-[1.005]">
<h3 class="text-xl font-bold text-gray-700 dark:text-gray-300 mb-4">Conversion Rate</h3>
<img src="https://picsum.photos/400/200?random=2" alt="Placeholder Doughnut Chart" class="w-full rounded-lg shadow-inner border border-gray-200 dark:border-gray-600" />
<p class="text-sm text-gray-500 dark:text-gray-400 mt-3">Overall conversion rate from lead to closed-won customer.</p>
</div>
</div>
</div>
<!-- Quick Actions Panel -->
<div class="md:col-span-2 lg:col-span-1 bg-gradient-to-br from-gray-200 to-gray-400 p-6 rounded-3xl shadow-xl border-t border-l border-white/50 dark:from-gray-800 dark:to-gray-900 dark:border-gray-700/50 transform transition-all duration-300 hover:shadow-2xl hover:scale-[1.01]">
<h2 class="text-3xl font-extrabold text-cyan-800 dark:text-cyan-400 mb-6 drop-shadow-md">Quick Actions</h2>
<div class="grid grid-cols-2 gap-4">
<!-- Action Button 1 -->
<button class="flex flex-col items-center justify-center p-5 bg-gradient-to-br from-cyan-300 to-cyan-500 text-white rounded-2xl shadow-lg border-t border-l border-white/70 dark:from-cyan-700 dark:to-cyan-900 dark:border-cyan-600/70 transform scale-[0.98] transition-all duration-200 hover:scale-[1.0] hover:shadow-xl active:scale-[0.95] focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-opacity-75">
<svg class="h-10 w-10 mb-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
<span class="text-lg font-bold drop-shadow-md">New Report</span>
</button>
<!-- Action Button 2 -->
<button class="flex flex-col items-center justify-center p-5 bg-gradient-to-br from-yellow-300 to-yellow-500 text-white rounded-2xl shadow-lg border-t border-l border-white/70 dark:from-yellow-700 dark:to-yellow-900 dark:border-yellow-600/70 transform scale-[0.98] transition-all duration-200 hover:scale-[1.0] hover:shadow-xl active:scale-[0.95] focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75">
<svg class="h-10 w-10 mb-2" fill="currentColor" viewBox="0 0 20 20"><path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.06-.665.06-1a7.001 7.001 0 00-12 0c0 .335.014.673.06 1H.75c.08.748.514 1.42 1.174 1.932.712.519 1.597.858 2.503.858h.5l.003.012A9.95 9.95 0 0010 18a9.95 9.95 0 005.49-.706l.003-.012h.5c.906 0 1.791-.339 2.503-.858.66-.512 1.094-1.184 1.174-1.932h-.807z"></path></svg>
<span class="text-lg font-bold drop-shadow-md">Manage Users</span>
</button>
<!-- Action Button 3 -->
<button class="flex flex-col items-center justify-center p-5 bg-gradient-to-br from-pink-300 to-pink-500 text-white rounded-2xl shadow-lg border-t border-l border-white/70 dark:from-pink-700 dark:to-pink-900 dark:border-pink-600/70 transform scale-[0.98] transition-all duration-200 hover:scale-[1.0] hover:shadow-xl active:scale-[0.95] focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-opacity-75">
<svg class="h-10 w-10 mb-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7 2a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2V4a2 2 0 00-2-2H7zm3 14a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
<span class="text-lg font-bold drop-shadow-md">Settings</span>
</button>
<!-- Action Button 4 -->
<button class="flex flex-col items-center justify-center p-5 bg-gradient-to-br from-lime-300 to-lime-500 text-white rounded-2xl shadow-lg border-t border-l border-white/70 dark:from-lime-700 dark:to-lime-900 dark:border-lime-600/70 transform scale-[0.98] transition-all duration-200 hover:scale-[1.0] hover:shadow-xl active:scale-[0.95] focus:outline-none focus:ring-2 focus:ring-lime-500 focus:ring-opacity-75">
<svg class="h-10 w-10 mb-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z" clip-rule="evenodd"></path></svg>
<span class="text-lg font-bold drop-shadow-md">Export Data</span>
</button>
</div>
</div>
</div>
</div>Composants associés
Composants de visualisation de données
Un composant de visualisation de données e-commerce simple et réactif avec un style de conception glassmorphism et une palette de couleurs monochromatiques, avec prise en charge du mode sombre.
Composants de visualisation de données
Un composant de visualisation de données réactif avec des éléments de conception 3D avec prise en charge des thèmes sombres.
Composants de visualisation de données
Un composant de visualisation de données réactif conçu avec les principes de Material Design tels que les mises en page basées sur une grille et les effets de profondeur, avec prise en charge des thèmes sombres.