차트 구성 요소
파스텔 색상과 다크 모드를 지원하는 스큐어모픽 디자인을 보여주는 반응형 대시보드 구성 요소로, 순수 HTML 및 Tailwind CSS를 사용하여 시뮬레이션된 막대 차트, 꺾은선형 차트 및 핵심 성과 지표를 제공합니다. JavaScript는 포함되어 있지 않습니다. 차트는 시각적 표현입니다.
HTML 코드
<div class="min-h-screen p-4 sm:p-8
bg-gradient-to-br from-blue-100 to-gray-100 dark:from-gray-900 dark:to-gray-800
font-sans text-gray-800 dark:text-gray-200">
<div class="max-w-7xl mx-auto">
<!-- Dashboard Header -->
<header class="mb-8 p-6 rounded-xl relative
bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
shadow-xl shadow-blue-200/50 dark:shadow-gray-950/70
border border-gray-100 dark:border-gray-700
text-center
">
<h1 class="text-3xl sm:text-4xl font-extrabold mb-2 text-gray-900 dark:text-gray-100 tracking-wide drop-shadow-sm">
Analytics Dashboard
</h1>
<p class="text-md sm:text-lg text-gray-600 dark:text-gray-400">
Data insights at a glance with a Classic UI
</p>
</header>
<!-- Main Content Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
<!-- Card 1: Sales Overview (Bar Chart) -->
<div class="
relative rounded-lg p-4 sm:p-6
bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
shadow-lg shadow-gray-300/50 dark:shadow-gray-950/70
border border-gray-200 dark:border-gray-700
overflow-hidden
">
<h3 class="text-lg sm:text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Sales Overview</h3>
<!-- Timeframe buttons (skeuomorphic) -->
<div class="flex space-x-2 mb-6">
<button class="
px-3 py-1 sm:px-4 sm:py-2 rounded-md text-sm sm:text-base
bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800
text-gray-700 dark:text-gray-300
shadow-sm shadow-gray-200 dark:shadow-gray-900
border border-gray-200 dark:border-gray-700
hover:shadow-md hover:shadow-gray-300 dark:hover:shadow-gray-900
active:shadow-inner active:shadow-gray-300 dark:active:shadow-gray-900
active:from-gray-200 active:to-gray-100 dark:active:from-gray-800 dark:active:to-gray-700
">Daily</button>
<button class="
px-3 py-1 sm:px-4 sm:py-2 rounded-md text-sm sm:text-base
bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800
text-gray-700 dark:text-gray-300
shadow-sm shadow-gray-200 dark:shadow-gray-900
border border-gray-200 dark:border-gray-700
hover:shadow-md hover:shadow-gray-300 dark:hover:shadow-gray-900
active:shadow-inner active:shadow-gray-300 dark:active:shadow-gray-900
active:from-gray-200 active:to-gray-100 dark:active:from-gray-800 dark:active:to-gray-700
">Monthly</button>
</div>
<!-- Chart Area - Recessed look -->
<div class="
min-h-[180px] sm:min-h-[200px] w-full p-4
rounded-md
bg-gray-100 dark:bg-gray-800
shadow-inner shadow-gray-300 dark:shadow-gray-900
border border-gray-300 dark:border-gray-700
relative flex items-end justify-around space-x-2
">
<!-- Example Bar Chart bars -->
<div class="w-1/6 md:w-1/6 h-full bg-blue-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-blue-600" style="height: 60%;"></div>
<div class="w-1/6 md:w-1/6 h-full bg-green-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-green-600" style="height: 80%;"></div>
<div class="w-1/6 md:w-1/6 h-full bg-purple-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-purple-600" style="height: 70%;"></div>
<div class="w-1/6 md:w-1/6 h-full bg-pink-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-pink-600" style="height: 40%;"></div>
<div class="w-1/6 md:w-1/6 h-full bg-yellow-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-yellow-600" style="height: 90%;"></div>
</div>
<!-- Legend -->
<div class="mt-4 flex flex-wrap gap-4 text-sm text-gray-700 dark:text-gray-300">
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-blue-300 dark:bg-blue-600 mr-2 shadow-sm"></span> Product A
</div>
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-green-300 dark:bg-green-600 mr-2 shadow-sm"></span> Product B
</div>
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-purple-300 dark:bg-purple-600 mr-2 shadow-sm"></span> Product C
</div>
</div>
</div>
<!-- Card 2: User Engagement (Simulated Line Chart) -->
<div class="
relative rounded-lg p-4 sm:p-6
bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
shadow-lg shadow-gray-300/50 dark:shadow-gray-950/70
border border-gray-200 dark:border-gray-700
">
<h3 class="text-lg sm:text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">User Engagement</h3>
<div class="
min-h-[180px] sm:min-h-[200px] w-full p-4 mb-4
rounded-md
bg-gray-100 dark:bg-gray-800
shadow-inner shadow-gray-300 dark:shadow-gray-900
border border-gray-300 dark:border-gray-700
relative
">
<!-- Placeholder for Line Chart - Use div elements to represent a wavy line -->
<div class="absolute inset-0 flex items-end">
<div class="w-full h-full bg-gradient-to-t from-blue-300/60 to-transparent dark:from-blue-600/60"
style="
clip-path: polygon(0 100%, 10% 80%, 20% 90%, 30% 70%, 40% 75%, 50% 60%, 60% 65%, 70% 50%, 80% 55%, 90% 40%, 100% 0, 100% 100%);
"></div>
</div>
<div class="absolute left-0 right-0 h-px border-t border-dotted border-gray-400 opacity-50 top-1/4"></div>
<div class="absolute left-0 right-0 h-px border-t border-dotted border-gray-400 opacity-50 top-1/2"></div>
<div class="absolute left-0 right-0 h-px border-t border-dotted border-gray-400 opacity-50 top-3/4"></div>
</div>
<div class="mt-4 flex flex-wrap gap-4 text-sm text-gray-700 dark:text-gray-300">
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-blue-300 dark:bg-blue-600 mr-2 shadow-sm"></span> Active Users
</div>
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-gray-300 dark:bg-gray-500 mr-2 shadow-sm"></span> Sessions
</div>
</div>
</div>
<!-- Card 3: Traffic Sources (Simulated Pie Chart / Segmented Data) -->
<div class="
relative rounded-lg p-4 sm:p-6
bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
shadow-lg shadow-gray-300/50 dark:shadow-gray-950/70
border border-gray-200 dark:border-gray-700
">
<h3 class="text-lg sm:text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Traffic Sources</h3>
<div class="
min-h-[180px] sm:min-h-[200px] w-full p-4 mb-4
rounded-md
bg-gray-100 dark:bg-gray-800
shadow-inner shadow-gray-300 dark:shadow-gray-900
border border-gray-300 dark:border-gray-700
flex items-center justify-center
">
<!-- Simple Circle Placeholder for Pie Chart -->
<div class="w-36 h-36 sm:w-48 sm:h-48 rounded-full shadow-lg border-2 border-gray-300 dark:border-gray-700 flex items-center justify-center
bg-gradient-to-br from-purple-300 to-pink-300 dark:from-purple-600 dark:to-pink-600
">
<div class="text-center">
<p class="text-3xl sm:text-4xl font-bold text-white drop-shadow-md">85%</p>
<p class="text-sm sm:text-md text-white drop-shadow-sm">Total Traffic</p>
</div>
</div>
</div>
<!-- Legend for segments -->
<div class="mt-4 flex flex-wrap gap-4 text-sm text-gray-700 dark:text-gray-300">
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-purple-300 dark:bg-purple-600 mr-2 shadow-sm"></span> Direct (45%)
</div>
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-pink-300 dark:bg-pink-600 mr-2 shadow-sm"></span> Referral (30%)
</div>
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-yellow-300 dark:bg-yellow-600 mr-2 shadow-sm"></span> Social (25%)
</div>
</div>
</div>
<!-- Card 4: Key Performance Indicators -->
<div class="
relative col-span-1 md:col-span-2 lg:col-span-3
rounded-lg p-4 sm:p-6
bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
shadow-lg shadow-gray-300/50 dark:shadow-gray-950/70
border border-gray-200 dark:border-gray-700
">
<h3 class="text-lg sm:text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Key Performance Indicators</h3>
<div class="
min-h-[150px] sm:min-h-[200px] w-full p-4 mb-4
rounded-md
bg-gray-100 dark:bg-gray-800
shadow-inner shadow-gray-300 dark:shadow-gray-900
border border-gray-300 dark:border-gray-700
grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-8 place-items-center
">
<div class="text-center">
<p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Total Users</p>
<p class="text-2xl sm:text-3xl font-bold text-blue-500 dark:text-blue-400 mt-1 drop-shadow-md">1.2M</p>
</div>
<div class="text-center">
<p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Revenue</p>
<p class="text-2xl sm:text-3xl font-bold text-green-500 dark:text-green-400 mt-1 drop-shadow-md">$500k</p>
</div>
<div class="text-center">
<p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Conversion Rate</p>
<p class="text-2xl sm:text-3xl font-bold text-purple-500 dark:text-purple-400 mt-1 drop-shadow-md">4.5%</p>
</div>
<div class="text-center">
<p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Bounce Rate</p>
<p class="text-2xl sm:text-3xl font-bold text-red-500 dark:text-red-400 mt-1 drop-shadow-md">28%</p>
</div>
</div>
</div>
</div>
</div>
</div>관련 구성 요소
차트 구성 요소
비즈니스 웹사이트를 위한 브루탈리즘 스타일의 차트 구성 요소로, 삼각형 색 구성표와 적당한 복잡성을 특징으로 합니다. 여기에는 Tailwind CSS를 사용하는 반응형 디자인과 다크 모드 지원이 포함됩니다.
VibrantGlassmorphismChart
블로그 및 콘텐츠 사이트에 적합한 생생한 색상의 간단한 Glassmorphism 차트 구성 요소입니다. 구성 요소는 반응형이며 Tailwind CSS를 사용하는 어두운 테마 지원을 포함합니다.