E-commerce Dashboard 구성 요소
스큐어모피즘, 생생한 색상 및 Tailwind CSS를 위한 간단한 레이아웃이 있는 전자 상거래 대시보드 구성 요소, 반응형 및 어두운 테마 지원.
HTML 코드
<div class="p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-xl max-w-sm mx-auto">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Dashboard Overview</h2>
<div class="flex items-center justify-between mb-4">
<div class="flex items-center">
<div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mr-3">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<div>
<p class="text-gray-600 dark:text-gray-300 text-sm">Total Sales</p>
<p class="text-lg font-semibold text-green-600 dark:text-green-400">$5,200</p>
</div>
</div>
<svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</div>
<div class="flex items-center justify-between mb-4">
<div class="flex items-center">
<div class="w-10 h-10 bg-red-500 rounded-full flex items-center justify-center mr-3">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-8m8 0l-5 2v-2m5 0z"></path></svg>
</div>
<div>
<p class="text-gray-600 dark:text-gray-300 text-sm">New orders</p>
<p class="text-lg font-semibold text-orange-600 dark:text-orange-400">150</p>
</div>
</div>
<svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-10 h-10 bg-yellow-500 rounded-full flex items-center justify-center mr-3">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h.01M17 9l2 2m0 0l2-2m-2 2v-2v2z"></path></svg>
</div>
<div>
<p class="text-gray-600 dark:text-gray-300 text-sm">Pending Issues</p>
<p class="text-lg font-semibold text-red-600 dark:text-red-400">12</p>
</div>
</div>
<svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</div>
</div>관련 구성 요소
E-commerce Neumorphism 구성 요소
Tailwind CSS를 사용하여 어두운 테마를 지원하는 Neumorphism 스타일로 설계된 반응형 전자 상거래 구성 요소입니다.
E-commerce Retro 구성 요소
레트로/빈티지 스타일로 디자인된 복잡한 전자 상거래 구성 요소로, 트라이어드 색 구성표와 반응형 디자인을 특징으로 하며 다크 모드를 지원하는 비즈니스/기업 웹사이트에 적합합니다.
Skeuomorphic E-commerce 컴포넌트
다크 모드를 지원하는 비즈니스 웹사이트를 위한 복잡하고 반응이 빠른 단색 Skeuomorphic E-commerce 구성 요소입니다.