RetroChartsComponent
A retro/vintage chart component with responsive effects and dark theme support using Tailwind CSS. Includes placeholder images.
HTML Code
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Sales Performance</h2>
<div class="relative h-48">
<!-- Placeholder SVG for chart - In a real application, this would be a charting library -->
<svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path fill="#4B5563" d="M0,100 L0,80 C10,75 20,78 30,70 C40,65 50,68 60,60 C70,55 80,58 90,50 C100,45 100,100 Z" class="dark:fill-gray-700"></path>
<path fill="#6B7280" d="M0,100 L0,85 C10,80 20,83 30,75 C40,70 50,73 60,65 C70,60 80,63 90,55 C100,50 100,100 Z" class="dark:fill-gray-600"></path>
</svg>
<div class="absolute top-0 left-0 w-full h-full flex items-center justify-center text-gray-600 dark:text-gray-300 text-sm font-mono">Chart Data Not Available</div>
</div>
<div class="mt-4 flex justify-between text-gray-700 dark:text-gray-300 text-sm">
<span>January</span>
<span>February</span>
<span>March</span>
<span>April</span>
<span>May</span>
</div>
</div>Related Components
Charts Component
A complex charts component designed for business and corporate websites, featuring a 3D design, complementary color scheme, and responsive structure with dark mode support.
Charts Component
A responsive dashboard component demonstrating skeuomorphic design with pastel colors and dark mode support, featuring simulated bar charts, line charts, and key performance indicators using pure HTML and Tailwind CSS. No JavaScript is included; charts are visual representations.
Charts Component
A simple, responsive chart component with pastel colors and dark mode support, designed for blog/content consumption with subtle microinteractions via hover effects. No JavaScript.