拟物化社交媒体图表

<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>