Heat Maps Component

<div class="dark:bg-gray-900 dark:text-gray-200 min-h-screen p-4">
  <div class="container mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-100">Heat Map: Content Engagement</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-6">Visualizing user engagement across different content pieces.</p>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <!-- Heat Map Item 1 -->
      <div class="bg-blue-100 dark:bg-blue-900 p-4 rounded-lg shadow-sm">
        <h3 class="font-semibold text-blue-800 dark:text-blue-200 mb-2">Article: Dark Mode Benefits</h3>
        <div class="grid grid-rows-3 grid-flow-col gap-1">
          <div class="bg-blue-300 dark:bg-blue-700 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-blue-900 dark:text-blue-100">85%</div>
          <div class="bg-blue-400 dark:bg-blue-600 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-blue-900 dark:text-blue-100">92%</div>
          <div class="bg-blue-500 dark:bg-blue-500 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-blue-900 dark:text-blue-100">78%</div>
          <div class="bg-blue-300 dark:bg-blue-700 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-blue-900 dark:text-blue-100">65%</div>
          <div class="bg-blue-400 dark:bg-blue-600 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-blue-900 dark:text-blue-100">70%</div>
        </div>
        <p class="text-sm text-blue-700 dark:text-blue-300 mt-2">Engagement: High</p>
      </div>

      <!-- Heat Map Item 2 -->
      <div class="bg-green-100 dark:bg-green-900 p-4 rounded-lg shadow-sm">
        <h3 class="font-semibold text-green-800 dark:text-green-200 mb-2">Guide: Tailwind CSS Basics</h3>
        <div class="grid grid-rows-3 grid-flow-col gap-1">
          <div class="bg-green-300 dark:bg-green-700 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-green-900 dark:text-green-100">70%</div>
          <div class="bg-green-400 dark:bg-green-600 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-green-900 dark:text-green-100">80%</div>
          <div class="bg-green-500 dark:bg-green-500 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-green-900 dark:text-green-100">75%</div>
          <div class="bg-green-300 dark:bg-green-700 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-green-900 dark:text-green-100">55%</div>
          <div class="bg-green-400 dark:bg-green-600 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-green-900 dark:text-green-100">60%</div>
        </div>
        <p class="text-sm text-green-700 dark:text-green-300 mt-2">Engagement: Medium</p>
      </div>

      <!-- Heat Map Item 3 -->
      <div class="bg-red-100 dark:bg-red-900 p-4 rounded-lg shadow-sm">
        <h3 class="font-semibold text-red-800 dark:text-red-200 mb-2">Post: Web Design Trends</h3>
        <div class="grid grid-rows-3 grid-flow-col gap-1">
          <div class="bg-red-300 dark:bg-red-700 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-red-900 dark:text-red-100">40%</div>
          <div class="bg-red-400 dark:bg-red-600 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-red-900 dark:text-red-100">50%</div>
          <div class="bg-red-500 dark:bg-red-500 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-red-900 dark:text-red-100">35%</div>
          <div class="bg-red-300 dark:bg-red-700 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-red-900 dark:text-red-100">25%</div>
          <div class="bg-red-400 dark:bg-red-600 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-red-900 dark:text-red-100">30%</div>
        </div>
        <p class="text-sm text-red-700 dark:text-red-300 mt-2">Engagement: Low</p>
      </div>
    </div>
  </div>
</div>