Glassmorphism Dashboard Layout
A complex, triadic-colored glassmorphism dashboard layout component with a sidebar, main content area, and multiple translucent panels, fully responsive and with dark mode support. Designed for data visualization and control panels.
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>Related Components
Dark Mode Layout Component
A responsive layout component with dark mode support using Tailwind CSS. Features a simple header, content area, and footer. Dark mode is handled by the `dark:` prefix in Tailwind classes.
Dark Mode Portfolio Layout
A dark mode responsive layout component for portfolios, featuring a monochromatic color scheme using Tailwind CSS. Includes placeholders for content and is designed for moderate complexity without JavaScript.
E-commerce Layout with 3D Design
A responsive web component layout for e-commerce with 3D design elements, incorporating a complementary color scheme and dark theme support. It features product cards, a navigation bar, and a footer, all styled with Tailwind CSS.