Composant Graphiques
Composant de graphiques complexe conçu pour les applications Web de commerce électronique en mode sombre avec une palette de couleurs en niveaux de gris. Ce composant comprend plusieurs éléments interactifs tels que des graphiques, des points de données, des info-bulles et des boutons, avec une conception réactive à l’aide de Tailwind CSS.
HTML Code
<div class="bg-gray-900 text-gray-100 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-4">Sales Chart</h2>
<div class="flex items-center justify-between mb-4">
<span class="text-lg">Last 30 Days</span>
<button class="bg-gray-700 hover:bg-gray-600 text-gray-100 py-1 px-3 rounded">Weekly</button>
<button class="bg-gray-700 hover:bg-gray-600 text-gray-100 py-1 px-3 rounded">Monthly</button>
<button class="bg-gray-700 hover:bg-gray-600 text-gray-100 py-1 px-3 rounded">Yearly</button>
</div>
<div class="relative">
<img src="https://picsum.photos/600/300" alt="Sales Chart" class="w-full rounded-lg">
<div class="absolute top-0 left-0 w-full h-full flex items-center justify-center bg-gray-800 bg-opacity-50 rounded-lg">
<span class="text-xl font-semibold">$23,000</span>
<span class="text-sm">Total Sales</span>
</div>
</div>
<div class="mt-4">
<div class="flex justify-around text-sm text-gray-400">
<div class="text-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mb-2">
<span>User 1</span>
</div>
<div class="text-center">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mb-2">
<span>User 2</span>
</div>
<div class="text-center">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mb-2">
<span>User 3</span>
</div>
</div>
</div>
</div>Composants associés
Composant Graphiques
Un composant de graphiques réactif conçu selon les principes de la conception matérielle, avec une palette de couleurs pastel et une interactivité complexe pour présenter des portefeuilles. Il inclut la prise en charge du mode sombre avec les classes CSS Tailwind.
SkeuomorphismChartsComponent
Composant de graphiques skeuomorphes pour les médias sociaux avec des couleurs complémentaires
Composant Graphiques
Un composant de tableau de bord réactif démontrant un design skeuomorphe avec des couleurs pastel et la prise en charge du mode sombre, avec des graphiques à barres simulés, des graphiques linéaires et des indicateurs de performance clés utilisant du HTML pur et du CSS Tailwind. Aucun JavaScript n’est inclus ; Les graphiques sont des représentations visuelles.