Heat Maps Component
A responsive Heat Maps Component with dark theme support, built with Tailwind CSS. It features a simple layout with minimal elements, suitable for a blog or content consumption.
HTML Code
<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>Related Components
Heat Maps Component
A simple, responsive heat map component for agriculture/farming websites, featuring a retro/vintage color scheme and dark mode support, designed with microinteractions in mind.
Heat Maps Component
A heatmap component with minimalist design, responsive layout, and dark theme support using Tailwind CSS. No JavaScript is included. Uses CSS for dark mode styling.
Heat Maps Component
A Heat Maps Component for blog/content consumption, featuring a responsive design with dark mode support. Utilizes grayscale color scheme and medium complexity with interactive features. No JavaScript, pure HTML with Tailwind CSS.