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 grafico complesso progettato per applicazioni web di e-commerce in modalità scura con una combinazione di colori in scala di grigi. Questo componente include più elementi interattivi come grafici, punti dati, descrizioni comandi e pulsanti, con un design reattivo che utilizza Tailwind CSS.
Componente Grafici
Un componente reattivo per grafici in stile 3D con supporto per il tema scuro utilizzando Tailwind CSS.
Componente Grafici
Un componente grafico semplice e reattivo con colori pastello e supporto per la modalità scura, progettato per il consumo di blog/contenuti con microinterazioni sottili tramite effetti al passaggio del mouse. Niente JavaScript.