Interactive Components 구성 요소
미니멀리스트/플랫 디자인, 어스 톤 색 구성표 및 대시보드 목적을 위한 복잡한 복잡성 수준을 사용하는 대화형 구성 요소 구성 요소로, Tailwind CSS로 구현되었습니다. 어두운 테마를 지원하는 반응형 디자인. 이미지에는 picsum.photos를 사용하고 아바타에는 randomuser.me 를 사용합니다.
HTML 코드
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-6">
<!-- Header -->
<header class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold text-gray-800 dark:text-white">Dashboard</h1>
<div class="flex items-center space-x-4">
<div class="relative">
<input type="text" placeholder="Search..." class="px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-white">
</div>
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
</div>
</header>
<!-- Main Content -->
<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 h-64">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Sales Overview</h2>
<!-- Placeholder for chart/graph -->
<div class="bg-gray-200 dark:bg-gray-700 h-32 rounded-md flex items-center justify-center text-gray-500 dark:text-gray-400">
Chart or Graph Placeholder
</div>
</div>
<!-- Card 2: Recent Orders -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-64 overflow-y-auto">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Recent Orders</h2>
<ul>
<li class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
<span class="text-gray-700 dark:text-gray-300">Order #1001</span>
<span class="text-green-600 dark:text-green-400">$150.00</span>
</li>
<li class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
<span class="text-gray-700 dark:text-gray-300">Order #1002</span>
<span class="text-green-600 dark:text-green-400">$220.00</span>
</li>
<li class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
<span class="text-gray-700 dark:text-gray-300">Order #1003</span>
<span class="text-green-600 dark:text-green-400">$95.00</span>
</li>
<li class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
<span class="text-gray-700 dark:text-gray-300">Order #1004</span>
<span class="text-green-600 dark:text-green-400">$310.00</span>
</li>
<li class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
<span class="text-gray-700 dark:text-gray-300">Order #1005</span>
<span class="text-green-600 dark:text-green-400">$180.00</span>
</li>
</ul>
</div>
<!-- Card 3: User Activity -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-64">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">User Activity</h2>
<!-- Placeholder for activity feed -->
<ul class="divide-y divide-gray-200 dark:divide-gray-700">
<li class="py-2 text-gray-700 dark:text-gray-300">User A logged in.</li>
<li class="py-2 text-gray-700 dark:text-gray-300">User B updated profile.</li>
<li class="py-2 text-gray-700 dark:text-gray-300">User C added a new product.</li>
</ul>
</div>
<!-- Card 4: Statistics -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-64">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Statistics</h2>
<div class="grid grid-cols-2 gap-4">
<div>
<p class="text-gray-500 dark:text-gray-400 text-sm">Total Users</p>
<p class="text-xl font-bold text-gray-800 dark:text-white">1,250</p>
</div>
<div>
<p class="text-gray-500 dark:text-gray-400 text-sm">Page Views</p>
<p class="text-xl font-bold text-gray-800 dark:text-white">5,800</p>
</div>
<div>
<p class="text-gray-500 dark:text-gray-400 text-sm">Bounce Rate</p>
<p class="text-xl font-bold text-gray-800 dark:text-white">35%</p>
</div>
<div>
<p class="text-gray-500 dark:text-gray-400 text-sm">Conversion Rate</p>
<p class="text-xl font-bold text-gray-800 dark:text-white">4.2%</p>
</div>
</div>
</div>
<!-- Card 5: Quick Actions -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-64">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Quick Actions</h2>
<div class="flex flex-col space-y-4">
<button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Add New Product</button>
<button class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">Generate Report</button>
<button class="bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-50">Send Notification</button>
</div>
</div>
<!-- Card 6: Image Gallery (using picsum.photos) -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-64 overflow-y-auto">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Gallery</h2>
<div class="grid grid-cols-2 gap-4">
<img src="https://picsum.photos/id/1018/200/150" alt="Gallery Image 1" class="rounded-md">
<img src="https://picsum.photos/id/1015/200/150" alt="Gallery Image 2" class="rounded-md">
<img src="https://picsum.photos/id/1019/200/150" alt="Gallery Image 3" class="rounded-md">
<img src="https://picsum.photos/id/103/200/150" alt="Gallery Image 4" class="rounded-md">
</div>
</div>
</div>
</div>