Glassmorphism Disposition du tableau de bord
Un composant complexe de mise en page de tableau de bord glassmorphism de couleur triadique avec une barre latérale, une zone de contenu principale et plusieurs panneaux translucides, entièrement réactif et avec prise en charge du mode sombre. Conçu pour la visualisation de données et les panneaux de contrôle.
HTML Code
<div class="min-h-screen bg-gradient-to-br from-[#8A2BE2] via-[#FFD700] to-[#E24A00] dark:from-[#1A032F] dark:via-[#3E3400] dark:to-[#491600] flex flex-col lg:flex-row p-4 sm:p-6 lg:p-8 relative overflow-hidden">
<!-- Background Circles for Glassmorphism Effect -->
<div class="absolute top-1/4 left-1/2 w-48 h-48 sm:w-64 sm:h-64 bg-[#FFD700]/30 dark:bg-[#3E3400]/30 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob lg:w-96 lg:h-96"></div>
<div class="absolute bottom-1/4 right-1/4 w-48 h-48 sm:w-64 sm:h-64 bg-[#E24A00]/30 dark:bg-[#491600]/30 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 lg:w-96 lg:h-96"></div>
<div class="absolute top-1/2 left-1/4 w-48 h-48 sm:w-64 sm:h-64 bg-[#8A2BE2]/30 dark:bg-[#1A032F]/30 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000 lg:w-96 lg:h-96 hover:scale-110 transition-transform duration-500"></div>
<!-- Global Glassmorphism Styles -->
<style>
.glass-panel {
background: rgba(255, 255, 255, 0.1);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
@apply text-white dark:text-gray-100;
}
.dark .glass-panel {
background: rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 255, 255, 0.1);
}
@keyframes blob {
0% { transform: translate(0px, 0px) scale(1) rotate(0deg); }
33% { transform: translate(30px, -50px) scale(1.1) rotate(10deg); }
66% { transform: translate(-20px, 20px) scale(0.9) rotate(-5deg); }
100% { transform: translate(0px, 0px) scale(1) rotate(0deg); }
}
.animate-blob {
animation: blob 7s ease-in-out infinite alternate;
}
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }
</style>
<!-- Sidebar (Larger Screens) -->
<aside class="glass-panel w-full lg:w-64 p-4 lg:p-6 mb-4 lg:mb-0 lg:mr-6 flex-shrink-0 z-10 flex flex-col">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold font-spectral">Dashboard</h2>
<button class="lg:hidden focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
</button>
</div>
<nav class="space-y-4 flex-grow">
<a href="#" class="flex items-center space-x-3 p-3 rounded-xl hover:bg-white/20 transition duration-300">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-5-.01v-2m-4.5 0h8.25m-6.75 3.01h9.75M9 5h.01M15 5h.01M19.75 12h.01"></path></svg>
<span class="text-lg font-medium">Home</span>
</a>
<a href="#" class="flex items-center space-x-3 p-3 rounded-xl hover:bg-white/20 transition duration-300">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3m0 0l3 3m-3-3v8m0-9a9 9 0 110 18 9 9 0 010-18z"></path></svg>
<span class="text-lg font-medium">Analytics</span>
</a>
<a href="#" class="flex items-center space-x-3 p-3 rounded-xl bg-white/10">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
<span class="text-lg font-medium">Reports</span>
</a>
<a href="#" class="flex items-center space-x-3 p-3 rounded-xl hover:bg-white/20 transition duration-300">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
<span class="text-lg font-medium">Settings</span>
</a>
</nav>
<div class="mt-auto">
<div class="flex items-center space-x-3 p-3 rounded-xl hover:bg-white/20 transition duration-300">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white/50">
<div>
<p class="font-semibold">Jane Doe</p>
<p class="text-sm opacity-80">Admin</p>
</div>
</div>
</div>
</aside>
<!-- Main Content Area -->
<main class="flex-grow grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-min z-10">
<!-- Metric Card 1 -->
<div class="glass-panel p-6 col-span-1 md:col-span-2 lg:col-span-1 flex flex-col justify-between">
<h3 class="text-xl font-semibold mb-2">Total Sales</h3>
<p class="text-4xl font-bold font-spectral text-[#FFD700] dark:text-[#FDD700]">$1,234,567</p>
<p class="text-sm opacity-80 mt-2">+12.5% from last month</p>
<div class="mt-4">
<span class="inline-block bg-white/20 rounded-full px-3 py-1 text-sm font-semibold">Monthly Goal</span>
</div>
</div>
<!-- Metric Card 2 -->
<div class="glass-panel p-6 flex flex-col justify-between">
<h3 class="text-xl font-semibold mb-2">New Users</h3>
<p class="text-4xl font-bold font-spectral text-[#8A2BE2] dark:text-[#CD9BF4]">8,901</p>
<p class="text-sm opacity-80 mt-2">+5.2% from last week</p>
<div class="mt-4">
<span class="inline-block bg-white/20 rounded-full px-3 py-1 text-sm font-semibold">Weekly Trend</span>
</div>
</div>
<!-- Metric Card 3 -->
<div class="glass-panel p-6 flex flex-col justify-between">
<h3 class="text-xl font-semibold mb-2">Active Projects</h3>
<p class="text-4xl font-bold font-spectral text-[#E24A00] dark:text-[#FF8C6B]">17</p>
<p class="text-sm opacity-80 mt-2">3 projects pending review</p>
<div class="mt-4">
<span class="inline-block bg-white/20 rounded-full px-3 py-1 text-sm font-semibold">Portfolio Status</span>
</div>
</div>
<!-- Sales Trends Chart (Placeholder) -->
<div class="glass-panel p-6 col-span-1 md:col-span-2 lg:col-span-2 flex flex-col">
<h3 class="text-xl font-semibold mb-4">Sales Trends</h3>
<div class="relative h-48 w-full bg-white/5 rounded-lg flex items-center justify-center">
<img src="https://picsum.photos/600/300?random=1" alt="Placeholder chart" class="w-full h-full object-cover rounded-lg opacity-80" loading="lazy">
<p class="absolute text-lg font-medium text-white/70">Chart Placeholder</p>
</div>
<p class="text-sm opacity-80 mt-4">Data updated at 10:30 AM.</p>
</div>
<!-- Recent Activities -->
<div class="glass-panel p-6 col-span-1 flex flex-col">
<h3 class="text-xl font-semibold mb-4">Recent Activities</h3>
<ul class="space-y-4 text-sm">
<li class="flex items-start">
<div class="flex-shrink-0 w-2 h-2 rounded-full bg-[#FFD700] mr-3 mt-2"></div>
<p><span class="font-semibold">John Doe</span> updated project <span class="text-[#FFD700] dark:text-[#FDD700]">'Phoenix'</span>.</p>
</li>
<li class="flex items-start">
<div class="flex-shrink-0 w-2 h-2 rounded-full bg-[#8A2BE2] mr-3 mt-2"></div>
<p><span class="font-semibold">Jane Smith</span> commented on 'Monthly Report'.</p>
</li>
<li class="flex items-start">
<div class="flex-shrink-0 w-2 h-2 rounded-full bg-[#E24A00] mr-3 mt-2"></div>
<p><span class="font-semibold">Marketing Team</span> launched new campaign.</p>
</li>
<li class="flex items-start">
<div class="flex-shrink-0 w-2 h-2 rounded-full bg-[#FFD700] mr-3 mt-2"></div>
<p><span class="font-semibold">System</span> backup completed successfully.</p>
</li>
</ul>
</div>
<!-- Quick Actions -->
<div class="glass-panel p-6 col-span-1 md:col-span-2 lg:col-span-1 flex flex-col justify-between">
<h3 class="text-xl font-semibold mb-4">Quick Actions</h3>
<div class="grid grid-cols-2 gap-4">
<button class="flex flex-col items-center p-4 bg-white/10 rounded-xl hover:bg-white/20 transition duration-300">
<svg class="w-8 h-8 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
<span class="text-center text-sm">New Report</span>
</button>
<button class="flex flex-col items-center p-4 bg-white/10 rounded-xl hover:bg-white/20 transition duration-300">
<svg class="w-8 h-8 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
<span class="text-center text-sm">Edit Profile</span>
</button>
<button class="flex flex-col items-center p-4 bg-white/10 rounded-xl hover:bg-white/20 transition duration-300">
<svg class="w-8 h-8 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h.01M17 11h.01M9 15h.01M15 15h.01M3 15a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10z"></path></svg>
<span class="text-center text-sm">Schedule Task</span>
</button>
<button class="flex flex-col items-center p-4 bg-white/10 rounded-xl hover:bg-white/20 transition duration-300">
<svg class="w-8 h-8 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253m9 0c1.168-.776 2.754-1.253 4.5-1.253 1.746 0 3.332.477 4.5 1.253m-12 0V13m0-13a.997.997 0 01.07-2c.493-2 3.033-2 5-2s4.507 0 5 2a.997.997 0 01.07 2M4 15h3.586a1 1 0 01.707.293L12 19L16 15.293a1 1 0 01.707-.293H20M4 15c0 1.572 1.487 2.228 2.5 2V21a1 1 0 001 1h12a1 1 0 001-1v-2c1.013-.772 2.5-1.428 2.5-3"></path></svg>
<span class="text-center text-sm">Support</span>
</button>
</div>
</div>
</main>
</div>Composants associés
Composant de mise en page
Un composant de mise en page de blog réactif conçu selon les principes de Material Design, utilisant une palette de couleurs monochromatique et prenant en charge le mode sombre.
Composant de mise en page des médias sociaux
Un composant de mise en page de médias sociaux réactif et complexe inspiré de la 3D avec des couleurs vives et une prise en charge du thème sombre à l’aide de Tailwind CSS. Il comprend un en-tête avec un logo et une navigation, une zone de contenu principale avec des cartes dynamiques pour les messages et une barre latérale pour les profils d’utilisateurs et les sujets tendance. Chaque élément est conçu pour donner un sentiment de profondeur et d’interaction.
Présentation du portefeuille
Il s’agit d’un composant de mise en page réactif simple pour un portefeuille axé sur les micro-interactions avec des couleurs complémentaires, la prise en charge du mode sombre et un minimum d’éléments.