RetroChartsComponent
Un composant de graphique rétro/vintage avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS. Comprend des images de remplacement.
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>Composants associés
Composant Graphiques
Un composant de graphiques simple et minimaliste avec des effets réactifs et une prise en charge du thème sombre.
VibrantGlassmorphismChart
Un composant simple de graphique Glassmorphism avec des couleurs vives, adapté aux blogs et aux sites de contenu. Le composant est réactif et inclut la prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Graphiques
Un composant de graphiques réactif de style 3D avec prise en charge du thème sombre à l’aide de Tailwind CSS.