Componente RetroChartsCharts
Un componente grafico retrò/vintage con effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS. Include immagini segnaposto.
Codice HTML
<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>Componenti correlati
Componente Grafici
Un componente dashboard reattivo che dimostra un design scheumorfico con colori pastello e supporto della modalità scura, con grafici a barre simulati, grafici a linee e indicatori chiave di prestazione utilizzando HTML puro e CSS Tailwind. Non è incluso alcun JavaScript; I grafici sono rappresentazioni visive.
SkeuomorphismChartsComponent
Componente Grafici Skeuomorfi per Social Media con Colori Complementari
Memphis_Finance_Charts_Component
Un complesso componente di grafici finanziari ispirato a Memphis Design, caratterizzato da colori audaci, forme geometriche e una combinazione di colori neon/elettrico. È completamente reattivo, supporta la modalità oscura ed è adatto per interfacce finanziarie/bancarie.