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>관련 구성 요소
Brutalist Grayscale Dashboard 구성 요소
비즈니스/기업 웹 사이트를 위한 단순하고 브루탈리즘 스타일의 그레이스케일 대시보드 레이아웃으로, 다크 모드 지원으로 반응하며 Tailwind CSS로 구축되었습니다.
Dashboards 구성 요소
Responsive Dashboards Microinteractions, Grayscale 색 구성표 및 블로그/콘텐츠 목적에 맞게 조정된 복잡한 복잡성 수준이 있는 구성 요소입니다. 어두운 테마를 지원합니다.