SkeuomorphicSocialMediaChart
Un semplice componente grafico ispirato a Skeuomorphic per i social media, con colori complementari e design reattivo.
Codice HTML
<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>
Componenti correlati
Componente Grafici
Un componente grafico complesso progettato per applicazioni web di e-commerce in modalità scura con una combinazione di colori in scala di grigi. Questo componente include più elementi interattivi come grafici, punti dati, descrizioni comandi e pulsanti, con un design reattivo che utilizza Tailwind CSS.
Industrial_Chart_Component_Ocean_Blue_Simple
Un componente grafico semplice e reattivo con un'estetica industriale di materie prime che utilizza toni oceano/blu, progettato per organizzazioni senza scopo di lucro/beneficenza. Include il supporto per la modalità scura.
Componente Grafici
Un componente grafico reattivo progettato in stile scheumorfismo con una combinazione di colori in scala di grigi e supporto per la modalità scura, ideale per applicazioni di e-commerce.