데이터 시각화 구성 요소(네온/글로우)
네온/글로우 효과, 따뜻한 중립 색상, 다크 모드 지원으로 완전한 응답성을 제공하는 SaaS 애플리케이션을 위한 복잡한 데이터 시각화 구성 요소입니다.
HTML 코드
<div class="font-sans bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 p-4 sm:p-6 md:p-8 rounded-lg shadow-xl dark:shadow-2xl transition-colors duration-300 relative overflow-hidden">
<!-- Background Glow Effect (Subtle) -->
<div class="absolute inset-0 bg-gradient-to-br from-stone-200 via-stone-50 to-stone-200 dark:from-stone-800 dark:via-stone-950 dark:to-stone-800 rounded-lg animate-pulse-glow-bg opacity-20 dark:opacity-10 blur-xl"></div>
<div class="relative z-10">
<!-- Header -->
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 border-b border-stone-200 dark:border-stone-700 pb-4">
<h2 class="text-2xl sm:text-3xl font-extrabold text-stone-800 dark:text-stone-50 mb-2 sm:mb-0 relative">
Overall Performance
<span class="absolute -bottom-1 left-0 w-full h-0.5 bg-gradient-to-r from-lime-400 to-sky-400 dark:from-lime-600 dark:to-sky-600 rounded-full shadow-glow-sm"></span>
</h2>
<div class="flex items-center space-x-3 text-sm">
<span class="text-stone-500 dark:text-stone-400">Last 30 Days</span>
<button class="flex items-center px-4 py-2 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700 rounded-full text-stone-700 dark:text-stone-200 hover:bg-stone-300 dark:hover:bg-stone-700 transition-all duration-200 relative group overflow-hidden">
<span class="absolute inset-0 bg-gradient-to-r from-transparent via-lime-400 to-transparent opacity-0 group-hover:opacity-20 animate-shine"></span>
<span class="relative">Filter <svg class="w-4 h-4 ml-1" 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="M19 9l-7 7-7-7"></path></svg></span>
</button>
</div>
</div>
<!-- Key Metrics Cards -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<!-- Metric Card 1 -->
<div class="bg-stone-50 dark:bg-stone-800 rounded-lg p-5 shadow-md dark:shadow-lg border border-stone-200 dark:border-stone-700 relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-br from-lime-300 to-transparent dark:from-lime-600 opacity-20 blur-xl animate-pulse-glow-sm group-hover:opacity-40 transition-opacity duration-300"></div>
<div class="relative z-10">
<p class="text-stone-500 dark:text-stone-400 text-sm mb-1">New Users</p>
<p class="text-2xl font-bold text-stone-900 dark:text-stone-50 mb-2">12,345 <span class="text-lime-500 text-base font-normal ml-1">+12.5%</span></p>
<div class="h-2 bg-stone-200 dark:bg-stone-700 rounded-full overflow-hidden">
<div class="h-full bg-lime-400 dark:bg-lime-600 w-3/4 rounded-full shadow-glow-xs"></div>
</div>
</div>
</div>
<!-- Metric Card 2 -->
<div class="bg-stone-50 dark:bg-stone-800 rounded-lg p-5 shadow-md dark:shadow-lg border border-stone-200 dark:border-stone-700 relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-br from-sky-300 to-transparent dark:from-sky-600 opacity-20 blur-xl animate-pulse-glow-sm group-hover:opacity-40 transition-opacity duration-300"></div>
<div class="relative z-10">
<p class="text-stone-500 dark:text-stone-400 text-sm mb-1">Revenue</p>
<p class="text-2xl font-bold text-stone-900 dark:text-stone-50 mb-2">$87,654 <span class="text-red-500 text-base font-normal ml-1">-3.2%</span></p>
<div class="h-2 bg-stone-200 dark:bg-stone-700 rounded-full overflow-hidden">
<div class="h-full bg-sky-400 dark:bg-sky-600 w-2/3 rounded-full shadow-glow-xs"></div>
</div>
</div>
</div>
<!-- Metric Card 3 -->
<div class="bg-stone-50 dark:bg-stone-800 rounded-lg p-5 shadow-md dark:shadow-lg border border-stone-200 dark:border-stone-700 relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-br from-purple-300 to-transparent dark:from-purple-600 opacity-20 blur-xl animate-pulse-glow-sm group-hover:opacity-40 transition-opacity duration-300"></div>
<div class="relative z-10">
<p class="text-stone-500 dark:text-stone-400 text-sm mb-1">Active Sessions</p>
<p class="text-2xl font-bold text-stone-900 dark:text-stone-50 mb-2">4,567 <span class="text-lime-500 text-base font-normal ml-1">+8.1%</span></p>
<div class="h-2 bg-stone-200 dark:bg-stone-700 rounded-full overflow-hidden">
<div class="h-full bg-purple-400 dark:bg-purple-600 w-4/5 rounded-full shadow-glow-xs"></div>
</div>
</div>
</div>
<!-- Metric Card 4 -->
<div class="bg-stone-50 dark:bg-stone-800 rounded-lg p-5 shadow-md dark:shadow-lg border border-stone-200 dark:border-stone-700 relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-br from-orange-300 to-transparent dark:from-orange-600 opacity-20 blur-xl animate-pulse-glow-sm group-hover:opacity-40 transition-opacity duration-300"></div>
<div class="relative z-10">
<p class="text-stone-500 dark:text-stone-400 text-sm mb-1">Conversion Rate</p>
<p class="text-2xl font-bold text-stone-900 dark:text-stone-50 mb-2">4.7% <span class="text-lime-500 text-base font-normal ml-1">+0.8%</span></p>
<div class="h-2 bg-stone-200 dark:bg-stone-700 rounded-full overflow-hidden">
<div class="h-full bg-orange-400 dark:bg-orange-600 w-1/2 rounded-full shadow-glow-xs"></div>
</div>
</div>
</div>
</div>
<!-- Charts Section -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Large Chart (Left) -->
<div class="lg:col-span-2 bg-stone-50 dark:bg-stone-800 rounded-lg p-6 shadow-md dark:shadow-lg border border-stone-200 dark:border-stone-700 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-tr from-stone-100 to-transparent dark:from-stone-900 opacity-10 blur-xl animate-pulse-glow-reverse"></div>
<div class="relative z-10">
<h3 class="text-xl font-semibold mb-4 text-stone-800 dark:text-stone-50">
Monthly Trends
<span class="block w-1/4 h-0.5 bg-gradient-to-r from-sky-400 to-purple-400 dark:from-sky-600 dark:to-purple-600 rounded-full mt-1 shadow-glow-sm"></span>
</h3>
<!-- Placeholder for Chart -->
<div class="w-full h-64 sm:h-80 md:h-96 bg-stone-100 dark:bg-stone-900 rounded-md flex items-center justify-center text-stone-400 dark:text-stone-600 border border-dashed border-stone-300 dark:border-stone-700 relative">
<p>Line Chart Placeholder</p>
<!-- Example data points with glow -->
<div class="absolute top-1/2 left-1/4 w-3 h-3 bg-lime-400 dark:bg-lime-600 rounded-full shadow-glow-md animate-bounce-slow"></div>
<div class="absolute top-1/3 left-1/2 w-3 h-3 bg-sky-400 dark:bg-sky-600 rounded-full shadow-glow-md animate-bounce-slow delay-100"></div>
<div class="absolute top-3/4 left-3/4 w-3 h-3 bg-purple-400 dark:bg-purple-600 rounded-full shadow-glow-md animate-bounce-slow delay-200"></div>
</div>
</div>
</div>
<!-- Small Charts / Stats (Right) -->
<div class="lg:col-span-1 flex flex-col gap-6">
<!-- Top Source Card -->
<div class="bg-stone-50 dark:bg-stone-800 rounded-lg p-5 shadow-md dark:shadow-lg border border-stone-200 dark:border-stone-700 relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-br from-teal-300 to-transparent dark:from-teal-600 opacity-20 blur-xl animate-pulse-glow-sm group-hover:opacity-40 transition-opacity duration-300"></div>
<div class="relative z-10">
<h3 class="text-lg font-semibold mb-3 text-stone-800 dark:text-stone-50">Top Source</h3>
<div class="flex items-center mb-2">
<img src="https://picsum.photos/40/40?grayscale&random=1" alt="Source Icon" class="w-10 h-10 rounded-full mr-3 border border-stone-300 dark:border-stone-600">
<div>
<p class="font-medium text-stone-900 dark:text-stone-100">Google Search</p>
<p class="text-sm text-stone-500 dark:text-stone-400">55% of traffic</p>
</div>
</div>
<div class="h-2 bg-stone-200 dark:bg-stone-700 rounded-full overflow-hidden">
<div class="h-full bg-teal-400 dark:bg-teal-600 w-[55%] rounded-full shadow-glow-xs"></div>
</div>
</div>
</div>
<!-- User Activity Stream -->
<div class="bg-stone-50 dark:bg-stone-800 rounded-lg p-5 shadow-md dark:shadow-lg border border-stone-200 dark:border-stone-700 relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-bl from-amber-300 to-transparent dark:from-amber-600 opacity-20 blur-xl animate-pulse-glow-sm group-hover:opacity-40 transition-opacity duration-300"></div>
<div class="relative z-10">
<h3 class="text-lg font-semibold mb-3 text-stone-800 dark:text-stone-50">Recent Activity</h3>
<ul class="space-y-3">
<li class="flex items-center text-sm">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar" class="w-8 h-8 rounded-full mr-3 border border-stone-300 dark:border-stone-600">
<div>
<span class="font-medium text-stone-900 dark:text-stone-100">John D.</span> viewed <span class="text-sky-500 dark:text-sky-400">'Analytics Dashboard'</span>
<span class="block text-xs text-stone-500 dark:text-stone-400">2 minutes ago</span>
</div>
</li>
<li class="flex items-center text-sm">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User avatar" class="w-8 h-8 rounded-full mr-3 border border-stone-300 dark:border-stone-600">
<div>
<span class="font-medium text-stone-900 dark:text-stone-100">Jane S.</span> updated <span class="text-purple-500 dark:text-purple-400">'Campaign Data'</span>
<span class="block text-xs text-stone-500 dark:text-stone-400">15 minutes ago</span>
</div>
</li>
<li class="flex items-center text-sm">
<img src="https://randomuser.me/api/portraits/men/78.jpg" alt="User avatar" class="w-8 h-8 rounded-full mr-3 border border-stone-300 dark:border-stone-600">
<div>
<span class="font-medium text-stone-900 dark:text-stone-100">Mike R.</span> logged in
<span class="block text-xs text-stone-500 dark:text-stone-400">1 hour ago</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tailwind CSS animated glows and pulse effects -->
<style>
@keyframes pulse-glow-bg {
0%, 100% { transform: scale(1); opacity: 0.2; }
50% { transform: scale(1.02); opacity: 0.3; }
}
@keyframes pulse-glow-bg-dark {
0%, 100% { transform: scale(1); opacity: 0.1; }
50% { transform: scale(1.02); opacity: 0.15; }
}
@keyframes pulse-glow-sm {
0%, 100% { transform: scale(1); opacity: 0.2; }
50% { transform: scale(1.01); opacity: 0.3; }
}
@keyframes pulse-glow-reverse {
0%, 100% { transform: scale(1); opacity: 0.1; }
50% { transform: scale(0.98); opacity: 0.15; }
}
@keyframes shine {
0% { transform: translateX(-100%); }
60% { transform: translateX(100%); }
100% { transform: translateX(100%); }
}
@keyframes bounce-slow {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.animate-pulse-glow-bg {
animation: pulse-glow-bg 6s infinite ease-in-out;
}
.dark .animate-pulse-glow-bg {
animation: pulse-glow-bg-dark 6s infinite ease-in-out;
}
.animate-pulse-glow-sm {
animation: pulse-glow-sm 4s infinite ease-in-out;
}
.animate-pulse-glow-reverse {
animation: pulse-glow-reverse 5s infinite ease-in-out;
}
.animate-shine {
animation: shine 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.animate-bounce-slow {
animation: bounce-slow 3s infinite ease-in-out;
}
.shadow-glow-xs {
filter: drop-shadow(0 0px 3px var(--tw-shadow-color));
--tw-shadow-color: rgba(74, 222, 128, 0.6);
}
.dark .shadow-glow-xs {
--tw-shadow-color: rgba(34, 197, 94, 0.6);
}
.shadow-glow-sm {
filter: drop-shadow(0 0px 8px var(--tw-shadow-color));
--tw-shadow-color: rgba(74, 222, 128, 0.8);
}
.dark .shadow-glow-sm {
--tw-shadow-color: rgba(34, 197, 94, 0.8);
}
.shadow-glow-md {
filter: drop-shadow(0 0px 10px var(--tw-shadow-color));
--tw-shadow-color: rgba(59, 130, 246, 0.8);
}
.dark .shadow-glow-md {
--tw-shadow-color: rgba(37, 99, 235, 0.8);
}
</style>관련 구성 요소
Sports_Fitness_Dashboard_Monospace
코드에서 영감을 받은 깔끔한 스포츠/피트니스 대시보드 구성 요소로, 고정 폭 글꼴, 터미널 미학, 바다/파란색 톤이 있습니다. 반응형 디자인, 다크 모드 지원, 스포츠 팀 및 피트니스 애플리케이션에 적합한 데이터 시각화 요소가 특징입니다.