Dashboards 구성 요소
반응형 효과와 어두운 테마 지원이 포함된 플랫 디자인을 보여주는 미니멀한 대시보드 구성 요소로, Tailwind CSS를 사용하여 구축되었습니다.
HTML 코드
<div class="min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="container mx-auto px-4 py-8">
<h2 class="text-3xl font-semibold text-gray-800 dark:text-white mb-6">Dashboard</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">Users</h3>
<p class="text-2xl font-bold text-gray-800 dark:text-white">1,234</p>
<img src="https://picsum.photos/200" alt="Placeholder" class="mt-2 rounded-lg" />
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">Sales</h3>
<p class="text-2xl font-bold text-gray-800 dark:text-white">567</p>
<img src="https://picsum.photos/200" alt="Placeholder" class="mt-2 rounded-lg" />
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">Revenue</h3>
<p class="text-2xl font-bold text-gray-800 dark:text-white">$12,345</p>
<img src="https://picsum.photos/200" alt="Placeholder" class="mt-2 rounded-lg" />
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">Sessions</h3>
<p class="text-2xl font-bold text-gray-800 dark:text-white">1,890</p>
<img src="https://picsum.photos/200" alt="Placeholder" class="mt-2 rounded-lg" />
</div>
</div>
<div class="mt-8 bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">Latest Users</h3>
<ul class="divide-y divide-gray-200 dark:divide-gray-700">
<li class="py-4 flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full mr-4" />
<div>
<p class="text-gray-800 dark:text-white">John Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</p>
</div>
</li>
<li class="py-4 flex items-center">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="h-10 w-10 rounded-full mr-4" />
<div>
<p class="text-gray-800 dark:text-white">Jane Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</p>
</div>
</li>
<li class="py-4 flex items-center">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="h-10 w-10 rounded-full mr-4" />
<div>
<p class="text-gray-800 dark:text-white">Mike Smith</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</p>
</div>
</li>
</ul>
</div>
</div>
</div>관련 구성 요소
Dashboard_Agriculture_ForestGreen_Luxury
농업 및 농업 웹 사이트를 위해 설계된 복잡한 럭셔리 테마의 대시보드 구성 요소로, 우아한 숲/녹색 색상 팔레트와 다크 모드 지원으로 완벽한 응답성을 제공합니다.
Cryptocurrency Dashboard 구성 요소
스위스/국제 타이포그래피 디자인 스타일을 갖춘 복잡하고 반응이 빠른 암호화폐 대시보드 구성 요소로, 멀티 컬러 그라디언트 요소와 다크 모드 지원을 특징으로 합니다. 여기에는 포트폴리오 개요, 시장 동향, 최근 거래 및 차트와 같은 여러 섹션이 포함됩니다.
Dashboards 구성 요소
포트폴리오를 위한 간단한 단색 다크 모드 대시보드 구성 요소로, Tailwind CSS로 구축되었습니다. 반응형 디자인이 특징이며 매끄럽고 미니멀한 룩을 위해 단일 색상의 다양한 음영을 사용합니다.