Glassmorphism 대시보드 레이아웃
사이드바, 기본 콘텐츠 영역, 여러 반투명 패널이 있는 복잡한 트라이어딕 색상의 glassmorphism 대시보드 레이아웃 구성 요소로, 완벽하게 반응하고 다크 모드를 지원합니다. 데이터 시각화 및 제어판을 위해 설계되었습니다.
HTML 코드
<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>관련 구성 요소
소셜 미디어 레이아웃 구성 요소
Tailwind CSS를 사용하여 생생한 색상과 어두운 테마를 지원하는 반응형의 복잡한 3D 스타일 소셜 미디어 레이아웃 구성 요소입니다. 여기에는 로고와 탐색이 있는 헤더, 게시물에 대한 동적 카드가 있는 기본 콘텐츠 영역, 사용자 프로필 및 인기 주제에 대한 사이드바가 포함됩니다. 각 요소는 깊이와 상호 작용 느낌을 줄 수 있도록 스타일이 지정되어 있습니다.
Glassmorphism 대시보드 레이아웃
반투명 젖빛 유리와 같은 요소가 있는 대시보드를 위한 간단한 glassmorphism 레이아웃으로, 파스텔 색 구성표와 다크 모드 지원을 특징으로 합니다.
Dashboard Layout 구성 요소
Material Design 미학이 있는 반응형 대시보드 레이아웃에는 사이드바, 헤더 및 기본 콘텐츠 영역이 포함됩니다. 다크 모드를 지원하며 균형 잡힌 모습을 위해 보색을 사용합니다. 복잡성은 순전히 CSS 및 Tailwind 클래스로 달성되는 대화식과 같은 기능으로 보통입니다.