SkeuomorphicSocialMediaChart
Un composant graphique simple, inspiré du Skeuomorphic, pour les médias sociaux, avec des couleurs complémentaires et un design réactif.
HTML Code
<div class="p-4 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 rounded-lg shadow-xl border border-gray-300 dark:border-gray-700">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Engagement Over Time</h2>
<div class="flex items-end justify-between h-40 mb-4">
<!-- Bar 1 (e.g., Likes) -->
<div class="flex-1 mx-1 bg-blue-500 dark:bg-blue-700 rounded-t-lg shadow-inner" style="height: 70%;"></div>
<!-- Bar 2 (e.g., Comments) -->
<div class="flex-1 mx-1 bg-red-500 dark:bg-red-700 rounded-t-lg shadow-inner" style="height: 90%;"></div>
<!-- Bar 3 (e.g., Shares) -->
<div class="flex-1 mx-1 bg-green-500 dark:bg-green-700 rounded-t-lg shadow-inner" style="height: 50%;"></div>
<!-- Bar 4 (e.g., Views) -->
<div class="flex-1 mx-1 bg-yellow-500 dark:bg-yellow-700 rounded-t-lg shadow-inner" style="height: 80%;"></div>
</div>
<div class="flex justify-between text-xs text-gray-600 dark:text-gray-400">
<span>Likes</span>
<span>Comments</span>
<span>Shares</span>
<span>Views</span>
</div>
</div>
Composants associés
Memphis_Marketplace_Charts_Component
Il s’agit d’un composant de graphiques complexe et réactif avec une esthétique Memphis Design, des couleurs complémentaires audacieuses, adapté à une place de marché multi-fournisseurs. Comprend la prise en charge du mode sombre et des éléments interactifs.
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.
Retro_Vintage_Pastel_Social_Charts_Component
Un composant de graphiques complexe et réactif avec une esthétique rétro/vintage des années 80/90 utilisant des couleurs pastel, conçu pour les plateformes de médias sociaux. Inclut la prise en charge du mode sombre.