Watercolor_Artistic_Dashboard_Grid_Layout
Un composant de mise en page de grille de tableau de bord réactif avec une esthétique aquarelle/artistique, utilisant une palette de couleurs monochromatique. Les fonctionnalités incluent des cartes avec des arrière-plans doux, des ombres subtiles et la prise en charge du mode sombre pour la visualisation des données et les panneaux de contrôle.
HTML Code
<div class="min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-indigo-100 dark:from-gray-900 dark:via-purple-950 dark:to-indigo-950 p-4 sm:p-6 font-sans">
<div class="max-w-7xl mx-auto">
<h1 class="text-4xl sm:text-5xl font-extrabold text-purple-800 dark:text-purple-300 mb-8 sm:mb-12 text-center drop-shadow-lg leading-tight">
<span class="block">Artistic Dashboard</span>
<span class="block text-2xl sm:text-3xl font-light text-purple-600 dark:text-purple-400 mt-2">Creative Insights</span>
</h1>
<div class="grid gap-6 sm:gap-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<!-- Card 1: Sales Overview -->
<div class="col-span-full md:col-span-2 lg:col-span-2 xl:col-span-2 relative bg-purple-50/70 dark:bg-purple-900/70 backdrop-blur-sm rounded-3xl p-6 sm:p-8 overflow-hidden shadow-xl dark:shadow-purple-700/20 group transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-purple-700/40 border border-purple-100 dark:border-purple-800">
<div class="absolute inset-0 bg-gradient-to-br from-fuchsia-200/50 via-purple-300/50 to-indigo-200/50 dark:from-fuchsia-950/20 dark:via-purple-950/20 dark:to-indigo-950/20 opacity-80 z-0 rounded-3xl -m-1 animate-pulse-background"></div>
<div class="relative z-10 flex flex-col h-full">
<h2 class="text-2xl sm:text-3xl font-bold text-purple-800 dark:text-purple-300 mb-4">Global Sales Performance</h2>
<p class="text-purple-600 dark:text-purple-400 mb-6 text-lg">Interactive sales data across all regions.</p>
<div class="flex-grow min-h-[150px] sm:min-h-[200px] bg-purple-100/50 dark:bg-purple-800/50 rounded-xl flex items-center justify-center text-purple-500 dark:text-purple-400 text-sm italic overflow-hidden shadow-inner">
<img src="https://picsum.photos/600/300?random=1" alt="Sales Chart" class="w-full h-full object-cover grayscale opacity-70 group-hover:grayscale-0 group-hover:opacity-100 transition-all duration-500 rounded-xl">
</div>
<div class="mt-6 flex justify-between items-center">
<span class="text-4xl font-extrabold text-purple-900 dark:text-purple-200">$1.2M</span>
<span class="text-green-600 dark:text-green-400 font-semibold text-lg flex items-center">
<svg class="w-6 h-6 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10.586 3.707a1 1 0 011.414 0l5.293 5.293a1 1 0 01-1.414 1.414L11 6.414V16a1 1 0 11-2 0V6.414L5.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
+12% <span class="hidden sm:inline-block ml-1">this month</span>
</span>
</div>
</div>
</div>
<!-- Card 2: User Engagement -->
<div class="relative bg-purple-50/70 dark:bg-purple-900/70 backdrop-blur-sm rounded-3xl p-6 sm:p-8 overflow-hidden shadow-xl dark:shadow-purple-700/20 group transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-purple-700/40 border border-purple-100 dark:border-purple-800">
<div class="absolute inset-0 bg-gradient-to-br from-indigo-200/50 via-pink-200/50 to-fuchsia-200/50 dark:from-indigo-950/20 dark:via-pink-950/20 dark:to-fuchsia-950/20 opacity-80 z-0 rounded-3xl -m-1 animate-pulse-background delay-75"></div>
<div class="relative z-10 flex flex-col h-full">
<h2 class="text-2xl font-bold text-purple-800 dark:text-purple-300 mb-4">User Engagement</h2>
<p class="text-purple-600 dark:text-purple-400 mb-6">Metrics for active users and session times.</p>
<div class="flex-grow min-h-[120px] bg-purple-100/50 dark:bg-purple-800/50 rounded-xl flex items-center justify-center text-purple-500 dark:text-purple-400 text-sm overflow-hidden shadow-inner">
<img src="https://picsum.photos/300/200?random=2" alt="User Engagement Chart" class="w-full h-full object-cover grayscale opacity-70 group-hover:grayscale-0 group-hover:opacity-100 transition-all duration-500 rounded-xl">
</div>
<div class="mt-6 flex justify-between items-center">
<span class="text-3xl font-extrabold text-purple-900 dark:text-purple-200">50K</span>
<span class="text-orange-500 dark:text-orange-400 font-semibold text-md flex items-center">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
-3% <span class="hidden sm:inline-block ml-1">last week</span>
</span>
</div>
</div>
</div>
<!-- Card 3: Project Status -->
<div class="relative bg-purple-50/70 dark:bg-purple-900/70 backdrop-blur-sm rounded-3xl p-6 sm:p-8 overflow-hidden shadow-xl dark:shadow-purple-700/20 group transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-purple-700/40 border border-purple-100 dark:border-purple-800">
<div class="absolute inset-0 bg-gradient-to-br from-pink-200/50 via-fuchsia-200/50 to-indigo-200/50 dark:from-pink-950/20 dark:via-fuchsia-950/20 dark:to-indigo-950/20 opacity-80 z-0 rounded-3xl -m-1 animate-pulse-background delay-150"></div>
<div class="relative z-10 flex flex-col h-full">
<h2 class="text-2xl font-bold text-purple-800 dark:text-purple-300 mb-4">Project Status</h2>
<p class="text-purple-600 dark:text-purple-400 mb-6">Overview of current project milestones.</p>
<ul class="flex-grow space-y-3">
<li class="flex items-center text-purple-700 dark:text-purple-300 border border-purple-200/50 dark:border-purple-800/50 p-3 rounded-xl bg-purple-100/50 dark:bg-purple-800/50 shadow-inner group-hover:scale-[1.01] transition-transform duration-200">
<span class="bg-green-400 dark:bg-green-600 w-3 h-3 rounded-full mr-3 border border-green-500 dark:border-green-700"></span>
<span>Feature X Development <strong class="font-semibold ml-2 text-purple-900 dark:text-purple-100">80%</strong></span>
</li>
<li class="flex items-center text-purple-700 dark:text-purple-300 border border-purple-200/50 dark:border-purple-800/50 p-3 rounded-xl bg-purple-100/50 dark:bg-purple-800/50 shadow-inner group-hover:scale-[1.01] transition-transform duration-200">
<span class="bg-yellow-400 dark:bg-yellow-600 w-3 h-3 rounded-full mr-3 border border-yellow-500 dark:border-yellow-700"></span>
<span>Marketing Campaign Launch <strong class="font-semibold ml-2 text-purple-900 dark:text-purple-100">45%</strong></span>
</li>
<li class="flex items-center text-purple-700 dark:text-purple-300 border border-purple-200/50 dark:border-purple-800/50 p-3 rounded-xl bg-purple-100/50 dark:bg-purple-800/50 shadow-inner group-hover:scale-[1.01] transition-transform duration-200">
<span class="bg-blue-400 dark:bg-blue-600 w-3 h-3 rounded-full mr-3 border border-blue-500 dark:border-blue-700"></span>
<span>New User Onboarding Flow <strong class="font-semibold ml-2 text-purple-900 dark:text-purple-100">95%</strong></span>
</li>
</ul>
<button class="mt-6 w-full py-3 px-4 bg-purple-500 dark:bg-purple-600 text-white font-semibold rounded-xl hover:bg-purple-600 dark:hover:bg-purple-700 transition-colors duration-300 shadow-md transform hover:-translate-y-0.5">
View All Projects
</button>
</div>
</div>
<!-- Card 4: Recent Activities -->
<div class="relative bg-purple-50/70 dark:bg-purple-900/70 backdrop-blur-sm rounded-3xl p-6 sm:p-8 overflow-hidden shadow-xl dark:shadow-purple-700/20 group transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-purple-700/40 border border-purple-100 dark:border-purple-800">
<div class="absolute inset-0 bg-gradient-to-br from-fuchsia-200/50 via-indigo-200/50 to-pink-200/50 dark:from-fuchsia-950/20 dark:via-indigo-950/20 dark:to-pink-950/20 opacity-80 z-0 rounded-3xl -m-1 animate-pulse-background delay-225"></div>
<div class="relative z-10 flex flex-col h-full">
<h2 class="text-2xl font-bold text-purple-800 dark:text-purple-300 mb-4">Recent Activities</h2>
<p class="text-purple-600 dark:text-purple-400 mb-6">Latest updates and notifications.</p>
<div class="flex-grow space-y-4">
<div class="flex items-start">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-purple-300 dark:border-purple-700 shadow-sm">
<div>
<p class="text-purple-800 dark:text-purple-200 font-semibold">John D. <span class="font-normal text-purple-600 dark:text-purple-400">completed task UI Revamp</span></p>
<p class="text-sm text-purple-500 dark:text-purple-400">2 hours ago</p>
</div>
</div>
<div class="flex items-start">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-purple-300 dark:border-purple-700 shadow-sm">
<div>
<p class="text-purple-800 dark:text-purple-200 font-semibold">Jane S. <span class="font-normal text-purple-600 dark:text-purple-400">added 3 new reports</span></p>
<p class="text-sm text-purple-500 dark:text-purple-400">5 hours ago</p>
</div>
</div>
<div class="flex items-start">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-purple-300 dark:border-purple-700 shadow-sm">
<div>
<p class="text-purple-800 dark:text-purple-200 font-semibold">Mike R. <span class="font-normal text-purple-600 dark:text-purple-400">commented on 'Analytics Bug'</span></p>
<p class="text-sm text-purple-500 dark:text-purple-400">Yesterday</p>
</div>
</div>
</div>
<button class="mt-6 w-full py-3 px-4 bg-purple-200 dark:bg-purple-700 text-purple-800 dark:text-purple-200 font-semibold rounded-xl hover:bg-purple-300 dark:hover:bg-purple-800 transition-colors duration-300 shadow-md transform hover:-translate-y-0.5">
View All Activities
</button>
</div>
</div>
<!-- Card 5: Performance Metrics (Small) -->
<div class="relative bg-purple-50/70 dark:bg-purple-900/70 backdrop-blur-sm rounded-3xl p-6 sm:p-8 overflow-hidden shadow-xl dark:shadow-purple-700/20 group transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-purple-700/40 border border-purple-100 dark:border-purple-800">
<div class="absolute inset-0 bg-gradient-to-br from-indigo-200/50 via-pink-200/50 to-fuchsia-200/50 dark:from-indigo-950/20 dark:via-pink-950/20 dark:to-fuchsia-950/20 opacity-80 z-0 rounded-3xl -m-1 animate-pulse-background delay-300"></div>
<div class="relative z-10 flex flex-col h-full">
<h2 class="text-2xl font-bold text-purple-800 dark:text-purple-300 mb-4">Load Speed</h2>
<p class="text-purple-600 dark:text-purple-400 mb-6">Current dashboard load time.</p>
<div class="flex-grow flex items-center justify-center">
<p class="text-6xl font-extrabold text-blue-500 dark:text-blue-400 drop-shadow-md">1.8s</p>
</div>
<p class="text-sm text-purple-500 dark:text-purple-400 text-center mt-auto">Compared to 2.1s last month</p>
</div>
</div>
<!-- Card 6: Customer Feedback (Small) -->
<div class="relative bg-purple-50/70 dark:bg-purple-900/70 backdrop-blur-sm rounded-3xl p-6 sm:p-8 overflow-hidden shadow-xl dark:shadow-purple-700/20 group transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-purple-700/40 border border-purple-100 dark:border-purple-800">
<div class="absolute inset-0 bg-gradient-to-br from-pink-200/50 via-fuchsia-200/50 to-indigo-200/50 dark:from-pink-950/20 dark:via-fuchsia-950/20 dark:to-indigo-950/20 opacity-80 z-0 rounded-3xl -m-1 animate-pulse-background delay-375"></div>
<div class="relative z-10 flex flex-col h-full">
<h2 class="text-2xl font-bold text-purple-800 dark:text-purple-300 mb-4">Feedback Score</h2>
<p class="text-purple-600 dark:text-purple-400 mb-6">Average customer satisfaction.</p>
<div class="flex-grow flex items-center justify-center">
<p class="text-6xl font-extrabold text-yellow-500 dark:text-yellow-400 drop-shadow-md">4.7</p>
</div>
<p class="text-sm text-purple-500 dark:text-purple-400 text-center mt-auto">Out of 5 stars</p>
</div>
</div>
<!-- Card 7: Resource Utilization (Large) -->
<div class="col-span-full md:col-span-2 lg:col-span-2 xl:col-span-full relative bg-purple-50/70 dark:bg-purple-900/70 backdrop-blur-sm rounded-3xl p-6 sm:p-8 overflow-hidden shadow-xl dark:shadow-purple-700/20 group transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-purple-700/40 border border-purple-100 dark:border-purple-800">
<div class="absolute inset-0 bg-gradient-to-br from-purple-200/50 via-indigo-200/50 to-pink-200/50 dark:from-purple-950/20 dark:via-indigo-950/20 dark:to-pink-950/20 opacity-80 z-0 rounded-3xl -m-1 animate-pulse-background delay-450"></div>
<div class="relative z-10 flex flex-col h-full">
<h2 class="text-2xl sm:text-3xl font-bold text-purple-800 dark:text-purple-300 mb-4">Server Resource Utilization</h2>
<p class="text-purple-600 dark:text-purple-400 mb-6 text-lg">Live monitoring of CPU, Memory, and Disk usage.</p>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-6 flex-grow">
<div class="bg-purple-100/50 dark:bg-purple-800/50 rounded-xl p-4 shadow-inner">
<h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-2">CPU Usage</h3>
<div class="w-full bg-purple-200 dark:bg-purple-700 rounded-full h-4 mb-2">
<div class="bg-blue-400 dark:bg-blue-500 h-4 rounded-full" style="width: 65%;"></div>
</div>
<p class="text-purple-600 dark:text-purple-400 text-sm">65% Used</p>
</div>
<div class="bg-purple-100/50 dark:bg-purple-800/50 rounded-xl p-4 shadow-inner">
<h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-2">Memory Usage</h3>
<div class="w-full bg-purple-200 dark:bg-purple-700 rounded-full h-4 mb-2">
<div class="bg-green-400 dark:bg-green-500 h-4 rounded-full" style="width: 40%;"></div>
</div>
<p class="text-purple-600 dark:text-purple-400 text-sm">40% Used</p>
</div>
<div class="bg-purple-100/50 dark:bg-purple-800/50 rounded-xl p-4 shadow-inner">
<h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-2">Disk Usage</h3>
<div class="w-full bg-purple-200 dark:bg-purple-700 rounded-full h-4 mb-2">
<div class="bg-red-400 dark:bg-red-500 h-4 rounded-full" style="width: 88%;"></div>
</div>
<p class="text-purple-600 dark:text-purple-400 text-sm">88% Used</p>
</div>
</div>
<button class="mt-8 py-3 px-6 bg-purple-500 dark:bg-purple-600 text-white font-semibold rounded-xl hover:bg-purple-600 dark:hover:bg-purple-700 transition-colors duration-300 shadow-md transform hover:-translate-y-0.5 self-center">
Detailed Analytics
</button>
</div>
</div>
</div>
</div>
<style>
@keyframes pulse-background {
0% { opacity: 0.8; transform: scale(1); }
50% { opacity: 0.9; transform: scale(1.01); }
100% { opacity: 0.8; transform: scale(1); }
}
.animate-pulse-background {
animation: pulse-background 8s ease-in-out infinite alternate;
}
.delay-75 { animation-delay: 0.75s; }
.delay-150 { animation-delay: 1.5s; }
.delay-225 { animation-delay: 2.25s; }
.delay-300 { animation-delay: 3s; }
.delay-375 { animation-delay: 3.75s; }
.delay-450 { animation-delay: 4.5s; }
</style>
</div>Composants associés
Watercolor_Artistic_Grid_Layout_Consulting
Un composant de mise en page de grille simple et réactif pour le conseil/les services, avec un design aquarelle/artistique doux avec des neutres froids et la prise en charge du mode sombre.
Composant de mise en page de grille
Un composant de mise en page de grille réactif suivant les principes de conception matérielle, avec des effets d’ombre et la prise en charge du mode sombre, à l’aide de Tailwind CSS.
Composant de disposition de grille de neumorphisme
Composant de disposition de grille de neumorphisme