SkeuomorphicSocialMediaChart
Eine einfache, von Skeuomorphic inspirierte Diagrammkomponente für soziale Medien mit Komplementärfarben und responsivem Design.
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>
Verwandte Komponenten
Verspielte Regenbogen-Charts-Komponente (Mode/Beauty)
Eine einfache, verspielte und farbenfrohe Diagrammkomponente für Mode- und Schönheitsmarken mit abgerundeten Elementen, Regenbogenverläufen und voller Reaktionsfähigkeit mit Unterstützung des Dunkelmodus.
VibrantGlassmorphismChart
Eine einfache Glassmorphism-Diagrammkomponente mit leuchtenden Farben, die für Blogs und Content-Websites geeignet ist. Die Komponente ist reaktionsschnell und bietet Unterstützung für dunkle Designs mit Tailwind CSS.
Charts-Komponente
Eine reaktionsschnelle Diagrammkomponente im 3D-Stil mit Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.