컨테이너 구성 요소(대시보드, '대시보드')
어두운 테마를 지원하는 반응형 컨테이너 구성 요소로, 마이크로 인터랙션과 유사한 색 구성표가 있는 대시보드를 위해 설계되었습니다.
HTML 코드
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="max-w-7xl mx-auto">
<!-- Header/Navigation Placeholder -->
<header class="flex justify-between items-center py-4 px-6 bg-white dark:bg-gray-800 rounded-lg shadow mb-6">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Dashboard Overview</h1>
<nav>
<ul class="flex space-x-4">
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Home</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Analytics</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Settings</a></li>
</ul>
</nav>
</header>
<!-- Main Content Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card 1: Sales Overview -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transform transition-transform duration-200 hover:scale-105 active:scale-95">
<div class="flex items-center justify-between mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Sales Overview</h2>
<span class="text-green-500 dark:text-green-400 text-sm font-medium">+12%</span>
</div>
<p class="text-3xl font-bold text-gray-900 dark:text-gray-50 mb-2">$12,345</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Total sales this month</p>
<div class="mt-4 h-24 bg-gradient-to-r from-blue-300 to-blue-500 dark:from-blue-600 dark:to-blue-800 rounded"></div>
</div>
<!-- Card 2: User Activity -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transform transition-transform duration-200 hover:scale-105 active:scale-95">
<div class="flex items-center justify-between mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">User Activity</h2>
<span class="text-yellow-500 dark:text-yellow-400 text-sm font-medium">85% Engaged</span>
</div>
<div class="flex items-center space-x-3 mb-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<p class="text-2xl font-bold text-gray-900 dark:text-gray-50">1,234</p>
</div>
<p class="text-gray-600 dark:text-gray-400 text-sm">Active users today</p>
<div class="mt-4 grid grid-cols-5 gap-2">
<div class="h-8 bg-purple-300 dark:bg-purple-600 rounded"></div>
<div class="h-8 bg-purple-400 dark:bg-purple-700 rounded"></div>
<div class="h-8 bg-purple-500 dark:bg-purple-800 rounded"></div>
<div class="h-8 bg-purple-400 dark:bg-purple-700 rounded"></div>
<div class="h-8 bg-purple-300 dark:bg-purple-600 rounded"></div>
</div>
</div>
<!-- Card 3: Traffic Sources -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transform transition-transform duration-200 hover:scale-105 active:scale-95">
<div class="flex items-center justify-between mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Traffic Sources</h2>
<span class="text-red-500 dark:text-red-400 text-sm font-medium">Geo-targeted</span>
</div>
<ul class="space-y-2 mb-4">
<li class="flex justify-between text-gray-700 dark:text-gray-300">
<span>Direct</span>
<span class="font-semibold">30%</span>
</li>
<li class="flex justify-between text-gray-700 dark:text-gray-300">
<span>Referral</span>
<span class="font-semibold">25%</span>
</li>
<li class="flex justify-between text-gray-700 dark:text-gray-300">
<span>Organic Search</span>
<span class="font-semibold">45%</span>
</li>
</ul>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
<div class="bg-indigo-500 h-2 rounded-full" style="width: 45%;"></div>
</div>
</div>
<!-- Card 4: Recent Orders (Full Width on Small Screens) -->
<div class="md:col-span-2 bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transform transition-transform duration-200 hover:scale-105 active:scale-95">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Recent Orders</h2>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-gray-700">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Order ID</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Customer</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Amount</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">#ORD001</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">Alice Smith</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">$199.99</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">
Completed
</span>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">#ORD002</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">Bob Johnson</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">$89.50</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100">
Pending
</span>
</td>
</tr>
<!-- More rows... -->
</tbody>
</table>
</div>
</div>
<!-- Card 5: Quick Stats (Image Placeholder) -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 flex flex-col items-center justify-center text-center transform transition-transform duration-200 hover:scale-105 active:scale-95">
<img class="w-32 h-32 object-cover rounded-full mb-4 ring-2 ring-blue-400 dark:ring-blue-600" src="https://picsum.photos/256/256?random=1" alt="Placeholder Image">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Project Progress</h2>
<p class="text-4xl font-bold text-blue-600 dark:text-blue-400">75%</p>
<p class="text-gray-600 dark:text-gray-400 text-sm mt-1">Completed tasks</p>
</div>
</div>
<!-- Footer Placeholder -->
<footer class="mt-6 py-4 text-center text-gray-600 dark:text-gray-400 text-sm">
© 2023 Dashboard Inc. All rights reserved.
</footer>
</div>
</div>관련 구성 요소
소셜 미디어 컨테이너
생생한 색상, 매력적인 마이크로 인터랙션, 어두운 테마 지원을 갖춘 반응형 컨테이너 구성 요소로, 소셜 미디어 인터페이스에 적합합니다. 기능에는 미묘한 호버 효과와 깔끔한 레이아웃이 포함됩니다.
Neon_Glow_Healthcare_Container_Component
의료 애플리케이션을 위한 복잡하고 반응이 빠른 컨테이너 구성 요소로, 네온/글로우 흑백 색 구성표와 생생한 악센트가 있습니다. 여러 대화형 요소, 다크 모드 지원 및 시맨틱 HTML을 제공합니다.