Dashboards 구성 요소
비즈니스 또는 기업 웹 사이트를 위해 설계된 복고풍 대시보드 구성 요소로, 80년대/90년대의 미학과 현대적인 레이아웃 및 색 구성표를 결합합니다. 반응형이며 어두운 테마를 지원하며 통계 카드, 사용자 프로필 등과 같은 대화형 요소를 제공합니다.
HTML 코드
<div class="flex flex-col min-h-screen bg-gray-50 dark:bg-gray-900">
<header class="flex justify-between items-center p-4 bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-700 dark:to-pink-800 shadow-lg">
<h1 class="text-2xl font-bold text-white">Dashboard</h1>
<button class="bg-white text-purple-500 py-2 px-4 rounded-lg dark:bg-gray-800 dark:text-purple-400 transition-all">Edit</button>
</header>
<main class="flex-grow p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md">
<h2 class="font-semibold text-lg">Total Sales</h2>
<p class="text-2xl text-purple-500 dark:text-purple-300">$45,000</p>
<img src="https://picsum.photos/200" alt="Sales Chart" class="mt-4 rounded-lg">
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md">
<h2 class="font-semibold text-lg">Users</h2>
<p class="text-2xl text-purple-500 dark:text-purple-300">1200</p>
<img src="https://picsum.photos/200" alt="User Statistics" class="mt-4 rounded-lg">
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md">
<h2 class="font-semibold text-lg">Feedback</h2>
<p class="text-2xl text-purple-500 dark:text-purple-300">300</p>
<img src="https://picsum.photos/200" alt="Feedback Chart" class="mt-4 rounded-lg">
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md">
<h2 class="font-semibold text-lg">Team Members</h2>
<div class="flex space-x-2 mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 2" class="w-10 h-10 rounded-full">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 3" class="w-10 h-10 rounded-full">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User 4" class="w-10 h-10 rounded-full">
</div>
</div>
</main>
<footer class="bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-700 dark:to-pink-800 text-white text-center p-4">
<p>© 2023 Company Name. All rights reserved.</p>
</footer>
</div>관련 구성 요소
Dashboards 구성 요소
포트폴리오 표시를 위해 설계된 간단하고 반응이 빠른 대시보드 구성 요소로, 마이크로 인터랙션을 통해 흙색에 초점을 맞춥니다. Tailwind CSS를 사용하여 어두운 테마를 지원합니다.
소셜 미디어 대시보드
Tailwind CSS를 사용하여 마이크로 인터랙션, 보색 구성표, 적당한 복잡성 및 어두운 테마를 지원하는 반응형 소셜 미디어 대시보드 구성 요소입니다. randomuser.me 의 아바타가 포함된 사용자 프로필과 picsum.photos의 이미지가 포함된 피드가 포함됩니다.