멤피스 세피아 대시보드
멤피스 디자인(Memphis Design) 미학이 가미된 대시보드 구성 요소로, 대담한 기하학적 모양과 따뜻한 세피아/갈색 색상 팔레트를 특징으로 하며 비즈니스 및 기업 웹 사이트에 적합합니다. 완전한 응답성과 다크 모드 지원이 포함됩니다.
HTML 코드
<div class="min-h-screen bg-amber-50 dark:bg-stone-900 font-sans p-4 sm:p-8">
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- Header Section -->
<div class="md:col-span-3 lg:col-span-4 bg-amber-200 dark:bg-stone-700 p-6 rounded-xl shadow-lg border-2 border-stone-800 dark:border-amber-50 relative overflow-hidden">
<div class="absolute top-0 left-0 w-32 h-32 bg-amber-400 dark:bg-amber-600 transform rotate-45 -translate-x-1/2 -translate-y-1/2"></div>
<div class="absolute bottom-0 right-0 w-24 h-24 bg-stone-500 dark:bg-stone-800 transform -rotate-45 translate-x-1/3 translate-y-1/3"></div>
<div class="relative z-10 flex flex-col sm:flex-row justify-between items-start sm:items-center">
<div>
<h1 class="text-3xl sm:text-4xl font-extrabold text-stone-800 dark:text-amber-50 mb-2">Welcome, Marketing Team!</h1>
<p class="text-stone-700 dark:text-amber-100 text-lg">Here's your dashboard overview for today.</p>
</div>
<div class="mt-4 sm:mt-0">
<button class="px-6 py-3 bg-stone-800 dark:bg-amber-50 text-amber-50 dark:text-stone-800 rounded-full font-semibold shadow-md hover:bg-stone-700 dark:hover:bg-amber-100 transition duration-300 relative overflow-hidden group">
<span class="relative z-10">New Report</span>
<div class="absolute inset-0 bg-stone-900 dark:bg-amber-100 transform -skew-x-12 scale-0 group-hover:scale-100 transition-transform duration-300 origin-left"></div>
</button>
</div>
</div>
</div>
<!-- Card 1: Sales Overview -->
<div class="bg-amber-300 dark:bg-stone-600 p-6 rounded-xl shadow-lg border-2 border-stone-800 dark:border-amber-50 relative overflow-hidden">
<div class="absolute top-6 -right-8 w-24 h-24 bg-stone-500 dark:bg-amber-700 rounded-full"></div>
<div class="absolute bottom-2 -left-6 w-32 h-16 bg-amber-400 dark:bg-stone-800 transform skew-y-6"></div>
<div class="relative z-10">
<h2 class="text-xl font-bold text-stone-800 dark:text-amber-50 mb-3">Total Sales</h2>
<p class="text-4xl font-extrabold text-stone-900 dark:text-amber-100 mb-4">$12,450</p>
<div class="flex items-center text-green-700 dark:text-green-300">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10.586 3H7a1 1 0 010-2h4a1 1 0 011 1v4a1 1 0 01-2 0V4.414l-5.293 5.293a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
<span class="font-medium">+5.2% last month</span>
</div>
</div>
</div>
<!-- Card 2: New Customers -->
<div class="bg-stone-400 dark:bg-amber-700 p-6 rounded-xl shadow-lg border-2 border-stone-800 dark:border-amber-50 relative overflow-hidden">
<div class="absolute top-0 left-0 w-24 h-24 bg-amber-500 dark:bg-stone-900 transform rotate-12 -translate-x-1/4 -translate-y-1/4"></div>
<div class="absolute bottom-0 right-0 w-16 h-16 bg-stone-700 dark:bg-amber-500 rounded-full"></div>
<div class="relative z-10">
<h2 class="text-xl font-bold text-stone-800 dark:text-amber-50 mb-3">New Customers</h2>
<p class="text-4xl font-extrabold text-stone-900 dark:text-amber-100 mb-4">289</p>
<div class="flex items-center text-red-700 dark:text-red-300">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414L9.414 17H13a1 1 0 010 2H9a1 1 0 01-1-1v-4a1 1 0 012 0v1.586l5.293-5.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<span class="font-medium">-1.5% last month</span>
</div>
</div>
</div>
<!-- Card 3: Website Traffic -->
<div class="bg-stone-200 dark:bg-stone-800 p-6 rounded-xl shadow-lg border-2 border-stone-800 dark:border-amber-50 relative overflow-hidden">
<div class="absolute top-4 right-4 w-12 h-12 bg-amber-400 dark:bg-amber-600 transform rotate-45"></div>
<div class="absolute bottom-0 left-0 w-16 h-16 bg-stone-500 dark:bg-stone-700 rounded-br-full"></div>
<div class="relative z-10">
<h2 class="text-xl font-bold text-stone-800 dark:text-amber-50 mb-3">Website Traffic</h2>
<p class="text-4xl font-extrabold text-stone-900 dark:text-amber-100 mb-4">78,123</p>
<div class="flex items-center text-green-700 dark:text-green-300">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10.586 3H7a1 1 0 010-2h4a1 1 0 011 1v4a1 1 0 01-2 0V4.414l-5.293 5.293a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
<span class="font-medium">+8.7% last month</span>
</div>
</div>
</div>
<!-- Card 4: Average Order Value (smaller, for lg screens) -->
<div class="hidden lg:block bg-amber-100 dark:bg-stone-700 p-6 rounded-xl shadow-lg border-2 border-stone-800 dark:border-amber-50 relative overflow-hidden">
<div class="absolute top-0 left-0 w-20 h-20 bg-stone-400 dark:bg-amber-600 transform -rotate-45 translate-x-1/3 -translate-y-1/3"></div>
<div class="absolute bottom-0 right-0 w-16 h-16 bg-amber-500 dark:bg-stone-900 transform rotate-45 translate-x-1/4 translate-y-1/4"></div>
<div class="relative z-10">
<h2 class="text-xl font-bold text-stone-800 dark:text-amber-50 mb-3">Average Order</h2>
<p class="text-4xl font-extrabold text-stone-900 dark:text-amber-100 mb-4">$43.75</p>
<div class="flex items-center text-green-700 dark:text-green-300">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10.586 3H7a1 1 0 010-2h4a1 1 0 011 1v4a1 1 0 01-2 0V4.414l-5.293 5.293a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
<span class="font-medium">+2.1% this month</span>
</div>
</div>
</div>
<!-- Large Card: Recent Activity -->
<div class="md:col-span-2 bg-stone-300 dark:bg-stone-700 p-6 rounded-xl shadow-lg border-2 border-stone-800 dark:border-amber-50 relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-amber-400 dark:bg-amber-600 transform rotate-12 translate-x-1/4 -translate-y-1/4"></div>
<div class="relative z-10">
<h2 class="text-2xl font-bold text-stone-800 dark:text-amber-50 mb-4">Recent Activity</h2>
<ul class="space-y-4">
<li class="flex items-center bg-amber-50 dark:bg-stone-800 p-3 rounded-lg shadow-sm border border-stone-400 dark:border-amber-50">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar">
<div>
<p class="text-stone-800 dark:text-amber-50"><span class="font-semibold">Jane Doe</span> purchased 'Product XYZ'</p>
<p class="text-sm text-stone-600 dark:text-amber-200">15 minutes ago</p>
</div>
</li>
<li class="flex items-center bg-amber-50 dark:bg-stone-800 p-3 rounded-lg shadow-sm border border-stone-400 dark:border-amber-50">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar">
<div>
<p class="text-stone-800 dark:text-amber-50"><span class="font-semibold">John Smith</span> signed up for newsletter</p>
<p class="text-sm text-stone-600 dark:text-amber-200">1 hour ago</p>
</div>
</li>
<li class="flex items-center bg-amber-50 dark:bg-stone-800 p-3 rounded-lg shadow-sm border border-stone-400 dark:border-amber-50">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/23.jpg" alt="Avatar">
<div>
<p class="text-stone-800 dark:text-amber-50"><span class="font-semibold">Emily White</span> reviewed 'Service ABC'</p>
<p class="text-sm text-stone-600 dark:text-amber-200">3 hours ago</p>
</div>
</li>
</ul>
</div>
</div>
<!-- Large Card: Quick Links -->
<div class="md:col-span-1 lg:col-span-2 bg-amber-200 dark:bg-stone-600 p-6 rounded-xl shadow-lg border-2 border-stone-800 dark:border-amber-50 relative overflow-hidden">
<div class="absolute top-0 left-0 w-24 h-24 bg-stone-500 dark:bg-amber-700 transform skew-y-12 -translate-x-1/2"></div>
<div class="absolute bottom-0 right-0 w-20 h-20 bg-amber-400 dark:bg-stone-800 rounded-tl-full"></div>
<div class="relative z-10">
<h2 class="text-2xl font-bold text-stone-800 dark:text-amber-50 mb-4">Quick Access</h2>
<nav>
<ul class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<li class="group">
<a href="#" class="flex items-center p-4 bg-amber-300 dark:bg-stone-500 rounded-lg shadow-md hover:scale-105 transition duration-300 border-2 border-transparent group-hover:border-stone-800 dark:group-hover:border-amber-50">
<svg class="w-6 h-6 text-stone-800 dark:text-amber-50 mr-3" fill="currentColor" viewBox="0 0 20 20"><path d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 001.946.806L14.75 1.25M2 17.5V14h6v3.5l-2 2-2-2zM12 14v3.5l2 2 2-2V14h-4z"></path></svg>
<span class="font-semibold text-stone-800 dark:text-amber-50">Analytics</span>
</a>
</li>
<li class="group">
<a href="#" class="flex items-center p-4 bg-stone-400 dark:bg-amber-600 rounded-lg shadow-md hover:scale-105 transition duration-300 border-2 border-transparent group-hover:border-stone-800 dark:group-hover:border-amber-50">
<svg class="w-6 h-6 text-stone-800 dark:text-amber-50 mr-3" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path></svg>
<span class="font-semibold text-stone-800 dark:text-amber-50">Messages</span>
</a>
</li>
<li class="group">
<a href="#" class="flex items-center p-4 bg-amber-300 dark:bg-stone-500 rounded-lg shadow-md hover:scale-105 transition duration-300 border-2 border-transparent group-hover:border-stone-800 dark:group-hover:border-amber-50">
<svg class="w-6 h-6 text-stone-800 dark:text-amber-50 mr-3" fill="currentColor" viewBox="0 0 20 20"><path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM11 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2h-2zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2h-2z"></path></svg>
<span class="font-semibold text-stone-800 dark:text-amber-50">Reports</span>
</a>
</li>
<li class="group">
<a href="#" class="flex items-center p-4 bg-stone-400 dark:bg-amber-600 rounded-lg shadow-md hover:scale-105 transition duration-300 border-2 border-transparent group-hover:border-stone-800 dark:group-hover:border-amber-50">
<svg class="w-6 h-6 text-stone-800 dark:text-amber-50 mr-3" fill="currentColor" viewBox="0 0 20 20"><path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zm-6 9A6 6 0 0012 9a6 6 0 00-6 6zM13 13.5a2.5 2.5 0 00-5 0M9 20a1 1 0 110-2h2a1 1 0 110 2H9z"></path></svg>
<span class="font-semibold text-stone-800 dark:text-amber-50">Settings</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>관련 구성 요소
Luxury Agriculture Dashboard 구성 요소
농업 및 농업 웹 사이트를 위한 우아하고 정교한 대시보드 구성 요소로, 생생한 에메랄드 액센트가 있는 흑백 색 구성표를 특징으로 합니다. 여기에는 주요 메트릭, 최근 활동 및 대화형 요소가 포함되며, 완전히 반응하고 다크 모드를 지원하도록 설계되었습니다.
Dashboards 구성 요소
포트폴리오를 위한 간단한 단색 다크 모드 대시보드 구성 요소로, Tailwind CSS로 구축되었습니다. 반응형 디자인이 특징이며 매끄럽고 미니멀한 룩을 위해 단일 색상의 다양한 음영을 사용합니다.
Dashboards 구성 요소
반응형 효과와 어두운 테마 지원이 포함된 플랫 디자인을 보여주는 미니멀한 대시보드 구성 요소로, Tailwind CSS를 사용하여 구축되었습니다.