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
Composant Graphiques
Un composant de graphiques simple et minimaliste avec des effets réactifs et une prise en charge du thème sombre.
Composant Cartes neumorphes
Il s’agit d’un composant de graphiques complexe et réactif avec un style de conception neumorphique et une palette de couleurs analogue, adapté à un portfolio pour présenter des travaux ou des produits. Inclut la prise en charge du mode sombre.
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.