Skeuomorphic_Vibrant_Business_Dashboard
생생한 색상의 복잡하고 반응이 빠른 스큐어모픽 대시보드 구성 요소로, 비즈니스/기업용으로 설계되었으며, 데이터 시각화 및 다크 모드를 지원하는 대화형 요소를 특징으로 합니다.
HTML 코드
<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>관련 구성 요소
E-commerce Data Visualization Components 구성 요소
전자상거래를 위한 데이터 시각화 구성요소로, 머티리얼 디자인 원칙, 흙빛 톤, Tailwind CSS를 사용한 반응형 다크 모드 지원으로 스타일이 지정되었습니다.
데이터 시각화 구성 요소
Tailwind CSS와 함께 머티리얼 디자인 스타일을 사용하는 데이터 시각화를 위한 웹 구성 요소로, 반응형 레이아웃, 어두운 테마 지원 및 자리 표시자 이미지를 제공합니다.
Data Visualization Components 구성 요소
블로그를 위한 반응형 다크 모드 호환 데이터 시각화 구성 요소로, 보색과 보색 구성표와 복잡한 대화형 요소가 있는 레트로/빈티지 디자인을 특징으로 합니다.