SkeuomorphicSocialMediaChart
Un componente de gráfico simple inspirado en Skeuomórfico para redes sociales, con colores complementarios y diseño receptivo.
Código 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>
Componentes relacionados
Componente Gráficos
Un componente de gráficos complejo diseñado para sitios web comerciales y corporativos, con un diseño 3D, una combinación de colores complementaria y una estructura receptiva con soporte para modo oscuro.
Componente Gráficos
Un componente de gráficos simple y minimalista con efectos responsivos y soporte para temas oscuros.
Componente lúdico de gráficos de arcoíris (Moda/Belleza)
Un componente de gráficos simple, divertido y colorido diseñado para marcas de moda y belleza, con elementos redondeados, degradados de arco iris y capacidad de respuesta total con soporte para modo oscuro.