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.
HTML Code
<div class="p-6 max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Portfolio Charts</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-pink-100 dark:bg-pink-900 rounded-lg shadow-lg p-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Sales Overview</h3>
<img src="https://picsum.photos/400/200" alt="Sales Chart" class="rounded-lg shadow-md">
</div>
<div class="bg-blue-100 dark:bg-blue-900 rounded-lg shadow-lg p-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">User Engagement</h3>
<img src="https://picsum.photos/400/200?random=1" alt="Engagement Chart" class="rounded-lg shadow-md">
</div>
<div class="bg-green-100 dark:bg-green-900 rounded-lg shadow-lg p-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Traffic Sources</h3>
<img src="https://picsum.photos/400/200?random=2" alt="Traffic Sources Chart" class="rounded-lg shadow-md">
</div>
<div class="bg-yellow-100 dark:bg-yellow-900 rounded-lg shadow-lg p-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Customer Feedback</h3>
<img src="https://picsum.photos/400/200?random=3" alt="Feedback Chart" class="rounded-lg shadow-md">
</div>
</div>
<div class="mt-6">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Team Members</h3>
<div class="flex flex-wrap mt-4 gap-4">
<div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-4 flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
<p class="text-gray-800 dark:text-gray-200">John Doe</p>
</div>
<div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-4 flex items-center">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
<p class="text-gray-800 dark:text-gray-200">Jane Smith</p>
</div>
<div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-4 flex items-center">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
<p class="text-gray-800 dark:text-gray-200">Alex Johnson</p>
</div>
<div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-4 flex items-center">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
<p class="text-gray-800 dark:text-gray-200">Emily Davis</p>
</div>
</div>
</div>
</div>Composants associés
Composant Graphiques
Un composant de graphiques de style brutaliste pour les sites Web d’entreprise, avec une palette de couleurs triadique et une complexité modérée. Il inclut un design réactif et la prise en charge du mode sombre à l’aide de Tailwind CSS.
Memphis_Finance_Charts_Component
Un composant complexe de graphiques financiers inspiré de Memphis Design, avec des couleurs vives, des formes géométriques et une palette de couleurs néon/électrique. Il est entièrement réactif, prend en charge le mode sombre et convient aux interfaces finance/banque.
Composant Graphiques
Un composant graphique simple et réactif pour les applications de sport/fitness, doté d’une interface utilisateur en mode sombre avec des tons de bijou. Affiche une mesure de progression ou de performance de base.