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
Charts-Komponente
Eine komplexe Diagrammkomponente, die für E-Commerce-Webanwendungen im Dunkelmodus mit einem Graustufen-Farbschema entwickelt wurde. Diese Komponente enthält mehrere interaktive Elemente wie Diagramme, Datenpunkte, QuickInfo und Schaltflächen mit responsivem Design mit Tailwind CSS.
Charts-Komponente
Eine Diagrammkomponente im brutalistischen Stil für Unternehmenswebsites mit einem triadischen Farbschema und moderater Komplexität. Es beinhaltet Responsive Design und Unterstützung für den Dunkelmodus mit Tailwind CSS.
Industrial_Retro_RealEstate_Charts
Einfache Diagrammkomponente mit industrieller Retro-Immobilienästhetik mit gedämpften Farben, exponierten Elementen und ansprechendem Design mit Unterstützung des Dunkelmodus.