Cyberpunk Chart Component - Government/Public
A moderately complex chart component with cyberpunk aesthetics, suitable for government and public service websites. Features a dark background, bright neon accents, and a retro/vintage color palette. Responsive and includes dark mode support.
HTML Code
<div class="font-mono text-gray-800 bg-gray-100 dark:bg-gray-900 dark:text-gray-200 p-4 sm:p-6 lg:p-8">
<div class="max-w-6xl mx-auto bg-gradient-to-br from-purple-900 to-indigo-900 dark:from-gray-950 dark:to-black rounded-lg shadow-xl overflow-hidden border-2 border-purple-700 dark:border-teal-400 transform hover:scale-[1.01] transition-transform duration-300 ease-in-out">
<div class="p-6 sm:p-8 lg:p-10 border-b-2 border-purple-600 dark:border-teal-500 flex flex-col sm:flex-row justify-between items-start sm:items-center">
<div>
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-yellow-300 tracking-wider mb-2 drop-shadow-[0_0_5px_rgba(252,211,77,0.7)] dark:text-teal-400 dark:drop-shadow-[0_0_5px_rgba(45,212,191,0.7)]">Public Service Metrics</h2>
<p class="text-purple-300 dark:text-gray-400 text-sm sm:text-base">Real-time data visualization for key public indicators.</p>
</div>
<div class="mt-4 sm:mt-0 flex gap-2">
<button class="px-4 py-2 bg-purple-500 hover:bg-purple-600 text-white dark:bg-teal-600 dark:hover:bg-teal-700 rounded-md text-sm font-semibold transition-colors duration-200 transform hover:scale-105 shadow-md border-2 border-purple-400 dark:border-teal-500">View Details</button>
<button class="px-4 py-2 bg-transparent border-2 border-yellow-300 text-yellow-300 hover:bg-yellow-300 hover:text-purple-900 dark:border-teal-400 dark:text-teal-400 dark:hover:bg-teal-400 dark:hover:text-gray-900 rounded-md text-sm font-semibold transition-colors duration-200 transform hover:scale-105">Export Data</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 p-6 sm:p-8 lg:p-10">
<!-- Chart 1: Bar Chart Placeholder -->
<div class="bg-purple-800 dark:bg-gray-800 rounded-lg p-6 border-2 border-purple-700 dark:border-teal-400 shadow-lg transform hover:shadow-xl transition-shadow duration-300 ease-in-out">
<h3 class="text-xl font-semibold text-yellow-200 mb-4 dark:text-teal-300">Citizen Engagement Index</h3>
<div class="h-48 sm:h-64 bg-purple-700 dark:bg-gray-700 rounded-md flex items-end overflow-hidden border border-purple-600 dark:border-teal-500">
<div class="w-1/5 bg-yellow-400 h-3/4 rounded-t-sm mx-1 shadow-neon dark:bg-teal-300 flex items-center justify-center"><span class="text-xs text-purple-900 font-bold dark:text-gray-900">75%</span></div>
<div class="w-1/5 bg-yellow-400 h-2/3 rounded-t-sm mx-1 shadow-neon dark:bg-teal-300 flex items-center justify-center"><span class="text-xs text-purple-900 font-bold dark:text-gray-900">68%</span></div>
<div class="w-1/5 bg-yellow-400 h-4/5 rounded-t-sm mx-1 shadow-neon dark:bg-teal-300 flex items-center justify-center"><span class="text-xs text-purple-900 font-bold dark:text-gray-900">82%</span></div>
<div class="w-1/5 bg-yellow-400 h-1/2 rounded-t-sm mx-1 shadow-neon dark:bg-teal-300 flex items-center justify-center"><span class="text-xs text-purple-900 font-bold dark:text-gray-900">50%</span></div>
<div class="w-1/5 bg-yellow-400 h-full rounded-t-sm mx-1 shadow-neon dark:bg-teal-300 flex items-center justify-center"><span class="text-xs text-purple-900 font-bold dark:text-gray-900">90%</span></div>
</div>
<div class="flex justify-between text-xs mt-2 text-purple-300 dark:text-gray-400">
<span>Q1</span><span>Q2</span><span>Q3</span><span>Q4</span><span>Avg</span>
</div>
</div>
<!-- Chart 2: Line Chart Placeholder with Data Points -->
<div class="bg-purple-800 dark:bg-gray-800 rounded-lg p-6 border-2 border-purple-700 dark:border-teal-400 shadow-lg transform hover:shadow-xl transition-shadow duration-300 ease-in-out">
<h3 class="text-xl font-semibold text-yellow-200 mb-4 dark:text-teal-300">Service Request Trend</h3>
<div class="h-48 sm:h-64 bg-purple-700 dark:bg-gray-700 rounded-md relative border border-purple-600 dark:border-teal-500">
<!-- Grid lines -->
<div class="absolute inset-0 grid grid-rows-4 grid-cols-6 opacity-30 text-purple-400 dark:text-gray-500">
<div class="col-span-full border-b border-dashed border-purple-600 dark:border-gray-600"></div>
<div class="col-span-full border-b border-dashed border-purple-600 dark:border-gray-600"></div>
<div class="col-span-full border-b border-dashed border-purple-600 dark:border-gray-600"></div>
<div class="col-span-full"></div>
<div class="row-span-full border-r border-dashed border-purple-600 dark:border-gray-600"></div>
<div class="row-span-full border-r border-dashed border-purple-600 dark:border-gray-600"></div>
<div class="row-span-full border-r border-dashed border-purple-600 dark:border-gray-600"></div>
<div class="row-span-full border-r border-dashed border-purple-600 dark:border-gray-600"></div>
<div class="row-span-full border-r border-dashed border-purple-600 dark:border-gray-600"></div>
<div class="row-span-full"></div>
</div>
<!-- Line path placeholders -->
<svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<defs>
<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#FCD34D" />
<stop offset="100%" stop-color="#8B5CF6" />
</linearGradient>
<linearGradient id="gradient1_dark" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#2DD4BF" />
<stop offset="100%" stop-color="#6EE7B7" />
</linearGradient>
</defs>
<polyline
points="0,80 20,40 40,60 60,30 80,50 100,20"
fill="none"
stroke="url(#gradient1)"
stroke-width="2"
class="dark:stroke-[url(#gradient1_dark)]"/>
<!-- Data Points -->
<circle cx="0" cy="80" r="2" fill="#FCD34D" class="dark:fill-teal-300"/>
<circle cx="20" cy="40" r="2" fill="#FCD34D" class="dark:fill-teal-300"/>
<circle cx="40" cy="60" r="2" fill="#FCD34D" class="dark:fill-teal-300"/>
<circle cx="60" cy="30" r="2" fill="#FCD34D" class="dark:fill-teal-300"/>
<circle cx="80" cy="50" r="2" fill="#FCD34D" class="dark:fill-teal-300"/>
<circle cx="100" cy="20" r="2" fill="#FCD34D" class="dark:fill-teal-300"/>
</svg>
</div>
<div class="flex justify-between text-xs mt-2 text-purple-300 dark:text-gray-400">
<span>Jan</span><span>Feb</span><span>Mar</span><span>Apr</span><span>May</span><span>Jun</span>
</div>
</div>
<!-- Key Performance Indicators -->
<div class="md:col-span-2 bg-purple-800 dark:bg-gray-800 rounded-lg p-6 border-2 border-purple-700 dark:border-teal-400 shadow-lg">
<h3 class="text-xl font-semibold text-yellow-200 mb-4 dark:text-teal-300">Key Indicators</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-purple-700 dark:bg-gray-700 p-4 rounded-md flex items-center justify-between border border-purple-600 dark:border-teal-500">
<div>
<p class="text-purple-300 text-sm dark:text-gray-400">Average Response Time</p>
<p class="text-2xl font-bold text-yellow-300 dark:text-teal-400">2h 15m</p>
</div>
<span class="text-green-400 text-lg"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg> Good</span>
</div>
<div class="bg-purple-700 dark:bg-gray-700 p-4 rounded-md flex items-center justify-between border border-purple-600 dark:border-teal-500">
<div>
<p class="text-purple-300 text-sm dark:text-gray-400">Citizen Satisfaction Avg</p>
<p class="text-2xl font-bold text-yellow-300 dark:text-teal-400">4.7 <span class="text-base font-normal">/ 5</span></p>
</div>
<span class="text-yellow-400 text-lg"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M12 5l7 7-7 7" />
</svg> Stable</span>
</div>
<div class="bg-purple-700 dark:bg-gray-700 p-4 rounded-md flex items-center justify-between border border-purple-600 dark:border-teal-500">
<div>
<p class="text-purple-300 text-sm dark:text-gray-400">Active Users Monthly</p>
<p class="text-2xl font-bold text-yellow-300 dark:text-teal-400">1.2M+</p>
</div>
<span class="text-sky-400 text-lg"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
</svg> Growing</span>
</div>
</div>
</div>
<!-- Recent Activity Feed -->
<div class="md:col-span-2 bg-purple-800 dark:bg-gray-800 rounded-lg p-6 border-2 border-purple-700 dark:border-teal-400 shadow-lg">
<h3 class="text-xl font-semibold text-yellow-200 mb-4 dark:text-teal-300">Recent System Activities</h3>
<ul class="space-y-4">
<li class="flex items-start bg-purple-700 dark:bg-gray-700 p-3 rounded-md border border-purple-600 dark:border-teal-500">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-yellow-300 dark:border-teal-400">
<div>
<p class="text-purple-200 dark:text-gray-300 text-sm"><strong class="text-yellow-300 dark:text-teal-400">System Admin</strong> updated 'Service Outage Protocol'. <span class="text-purple-400 dark:text-gray-500 text-xs">5 mins ago</span></p>
</div>
</li>
<li class="flex items-start bg-purple-700 dark:bg-gray-700 p-3 rounded-md border border-purple-600 dark:border-teal-500">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-yellow-300 dark:border-teal-400">
<div>
<p class="text-purple-200 dark:text-gray-300 text-sm"><strong class="text-yellow-300 dark:text-teal-400">Data Analyst</strong> generated 'Q2 Performance Report'. <span class="text-purple-400 dark:text-gray-500 text-xs">1 hour ago</span></p>
</div>
</li>
<li class="flex items-start bg-purple-700 dark:bg-gray-700 p-3 rounded-md border border-purple-600 dark:border-teal-500">
<img src="https://randomuser.me/api/portraits/men/18.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-yellow-300 dark:border-teal-400">
<div>
<p class="text-purple-200 dark:text-gray-300 text-sm"><strong class="text-yellow-300 dark:text-teal-400">Network Security</strong> detected 'Unusual Login Attempt'. <span class="text-red-400 dark:text-red-300 text-xs">3 hours ago</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="p-6 sm:p-8 lg:p-10 border-t-2 border-purple-600 dark:border-teal-500 text-center text-purple-400 dark:text-gray-500 text-xs sm:text-sm">
© 2077 Public Data Systems. All rights reserved. Data refreshed every 30 seconds.
</div>
</div>
<style>
.shadow-neon {
box-shadow: 0 0 5px rgba(252, 211, 77, 0.7), 0 0 10px rgba(252, 211, 77, 0.4), 0 0 15px rgba(252, 211, 77, 0.2);
}
.dark .shadow-neon {
box-shadow: 0 0 5px rgba(45, 212, 191, 0.7), 0 0 10px rgba(45, 212, 191, 0.4), 0 0 15px rgba(45, 212, 191, 0.2);
}
/* Custom placeholder for bar chart values to be readable on bars */
.w-1\/5 span {
font-size: 0.75rem; /* 12px */
transform: translateY(-0.75rem); /* Adjust position if needed */
position: relative;
width: 100%;
text-align: center;
}
</style>
</div>Related Components
Playful Rainbow Charts Component (Fashion/Beauty)
A simple, playful, and colorful charts component designed for fashion and beauty brands, featuring rounded elements, rainbow gradients, and full responsiveness with dark mode support.
RetroChartsComponent
A retro/vintage chart component with responsive effects and dark theme support using Tailwind CSS. Includes placeholder images.
Glassmorphism Sales Chart
A simple, responsive chart component with a Glassmorphism style, vibrant color scheme, and dark mode support, suitable for e-commerce dashboards.