Heat Maps Component
A responsive heat map component for manufacturing/industrial applications, featuring a paper/print-inspired design and an ocean/blue color scheme. Includes dark mode support and semantic HTML.
HTML Code
<div class="font-sans bg-slate-100 text-gray-800 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8">
<div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
<!-- Header Section -->
<div class="p-6 sm:p-8 bg-gradient-to-r from-blue-700 to-sky-500 dark:from-blue-900 dark:to-sky-700 text-white border-b-4 border-sky-400 dark:border-sky-500">
<h2 class="text-3xl sm:text-4xl font-extrabold mb-2 leading-tight">Production Line Heat Map</h2>
<p class="text-lg opacity-90">Real-time operational insights for manufacturing efficiency.</p>
</div>
<!-- Controls/Filters Section -->
<div class="p-4 sm:p-6 bg-gray-50 dark:bg-gray-850 border-b border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row items-center justify-between space-y-3 sm:space-y-0 sm:space-x-4">
<div class="flex items-center space-x-2">
<label for="period-select" class="text-sm font-medium text-gray-700 dark:text-gray-300">Period:</label>
<select id="period-select" class="py-2 px-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-sm">
<option>Last Hour</option>
<option selected>Last 24 Hours</option>
<option>Last 7 Days</option>
<option>Last 30 Days</option>
</select>
</div>
<div class="flex items-center space-x-2">
<label for="metric-select" class="text-sm font-medium text-gray-700 dark:text-gray-300">Metric:</label>
<select id="metric-select" class="py-2 px-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-sm">
<option selected>Temperature (°C)</option>
<option>Vibration (Hz)</option>
<option>Pressure (bar)</option>
<option>Downtime (min)</option>
</select>
</div>
<button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 text-white font-semibold rounded-md shadow-md transition duration-200 ease-in-out text-sm w-full sm:w-auto">
Refresh Data
</button>
</div>
<!-- Heat Map Grid Area -->
<div class="p-6 sm:p-8">
<h3 class="text-2xl font-semibold mb-6 text-gray-800 dark:text-gray-100">Sensor Performance Overview</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6">
<!-- Example Heat Map Cells -->
<div class="aspect-w-16 aspect-h-9 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 relative group">
<div class="p-4 flex flex-col justify-between h-full">
<div>
<p class="text-sm text-gray-500 dark:text-gray-400 font-medium"><i class="fas fa-microchip mr-1"></i> Sector A - Machine 1</p>
<h4 class="text-lg font-bold text-gray-900 dark:text-gray-100 mt-1">Conveyor Belt 1</h4>
</div>
<div class="relative flex-grow flex items-center justify-center">
<!-- Heat map indicator - Example: Red for high, Blue for low -->
<div class="w-full h-full absolute inset-0 bg-gradient-to-tr from-red-400 via-orange-400 to-yellow-300 dark:from-red-600 dark:via-orange-600 dark:to-yellow-500 opacity-70"></div>
<span class="relative text-5xl font-extrabold text-white text-shadow-lg">92°C</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-300 text-right mt-2"><i class="fas fa-arrow-alt-circle-up text-red-500"></i> +5% from avg.</p>
</div>
<div class="absolute inset-0 bg-blue-600 dark:bg-blue-700 text-white p-4 sm:p-6 opacity-0 group-hover:opacity-95 transition-opacity duration-300 flex items-center justify-center text-center rounded-lg">
<div>
<p class="font-semibold mb-2">Details:</p>
<ul class="text-sm text-left list-disc list-inside space-y-1">
<li>Last Spike: 95°C (10:15 AM)</li>
<li>Avg. 24h: 87°C</li>
<li>Status: <span class="text-yellow-200">Warning</span></li>
</ul>
</div>
</div>
</div>
<div class="aspect-w-16 aspect-h-9 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 relative group">
<div class="p-4 flex flex-col justify-between h-full">
<div>
<p class="text-sm text-gray-500 dark:text-gray-400 font-medium"><i class="fas fa-microchip mr-1"></i> Sector A - Machine 2</p>
<h4 class="text-lg font-bold text-gray-900 dark:text-gray-100 mt-1">Robotic Arm Extruder</h4>
</div>
<div class="relative flex-grow flex items-center justify-center">
<div class="w-full h-full absolute inset-0 bg-gradient-to-tr from-green-400 via-blue-400 to-cyan-300 dark:from-green-600 dark:via-blue-600 dark:to-cyan-500 opacity-70"></div>
<span class="relative text-5xl font-extrabold text-white text-shadow-lg">78°C</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-300 text-right mt-2"><i class="fas fa-arrow-alt-circle-down text-green-500"></i> -2% from avg.</p>
</div>
<div class="absolute inset-0 bg-blue-600 dark:bg-blue-700 text-white p-4 sm:p-6 opacity-0 group-hover:opacity-95 transition-opacity duration-300 flex items-center justify-center text-center rounded-lg">
<div>
<p class="font-semibold mb-2">Details:</p>
<ul class="text-sm text-left list-disc list-inside space-y-1">
<li>Last Spike: 79°C (08:30 AM)</li>
<li>Avg. 24h: 80°C</li>
<li>Status: <span class="text-green-200">Optimal</span></li>
</ul>
</div>
</div>
</div>
<div class="aspect-w-16 aspect-h-9 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 relative group">
<div class="p-4 flex flex-col justify-between h-full">
<div>
<p class="text-sm text-gray-500 dark:text-gray-400 font-medium"><i class="fas fa-microchip mr-1"></i> Sector B - Machine 3</p>
<h4 class="text-lg font-bold text-gray-900 dark:text-gray-100 mt-1">Curing Oven C-14</h4>
</div>
<div class="relative flex-grow flex items-center justify-center">
<div class="w-full h-full absolute inset-0 bg-gradient-to-tr from-yellow-400 via-orange-500 to-red-500 dark:from-yellow-600 dark:via-orange-700 dark:to-red-700 opacity-70"></div>
<span class="relative text-5xl font-extrabold text-white text-shadow-lg">185°C</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-300 text-right mt-2"><i class="fas fa-exclamation-triangle text-orange-500"></i> +10% from avg.</p>
</div>
<div class="absolute inset-0 bg-blue-600 dark:bg-blue-700 text-white p-4 sm:p-6 opacity-0 group-hover:opacity-95 transition-opacity duration-300 flex items-center justify-center text-center rounded-lg">
<div>
<p class="font-semibold mb-2">Details:</p>
<ul class="text-sm text-left list-disc list-inside space-y-1">
<li>Last Spike: 188°C (09:00 AM)</li>
<li>Avg. 24h: 170°C</li>
<li>Status: <span class="text-orange-200">Critical</span></li>
</ul>
</div>
</div>
</div>
<div class="aspect-w-16 aspect-h-9 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 relative group">
<div class="p-4 flex flex-col justify-between h-full">
<div>
<p class="text-sm text-gray-500 dark:text-gray-400 font-medium"><i class="fas fa-microchip mr-1"></i> Sector B - Machine 4</p>
<h4 class="text-lg font-bold text-gray-900 dark:text-gray-100 mt-1">Assembly Line 3</h4>
</div>
<div class="relative flex-grow flex items-center justify-center">
<div class="w-full h-full absolute inset-0 bg-gradient-to-tr from-blue-400 via-cyan-400 to-teal-300 dark:from-blue-600 dark:via-cyan-600 dark:to-teal-500 opacity-70"></div>
<span class="relative text-5xl font-extrabold text-white text-shadow-lg">65°C</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-300 text-right mt-2"><i class="fas fa-check-circle text-green-500"></i> Stable</p>
</div>
<div class="absolute inset-0 bg-blue-600 dark:bg-blue-700 text-white p-4 sm:p-6 opacity-0 group-hover:opacity-95 transition-opacity duration-300 flex items-center justify-center text-center rounded-lg">
<div>
<p class="font-semibold mb-2">Details:</p>
<ul class="text-sm text-left list-disc list-inside space-y-1">
<li>Last Spike: 66°C (07:00 AM)</li>
<li>Avg. 24h: 65°C</li>
<li>Status: <span class="text-green-200">Optimal</span></li>
</ul>
</div>
</div>
</div>
<!-- Add more heat map cells as needed -->
</div>
<!-- Example Legend for the Heat Map -->
<div class="mt-8 flex flex-wrap justify-center gap-4 text-sm">
<div class="flex items-center">
<span class="w-4 h-4 mr-2 rounded-full bg-gradient-to-r from-green-400 to-blue-400 dark:from-green-600 dark:to-blue-600"></span>
<span class="text-gray-700 dark:text-gray-300">Optimal (< 80°C)</span>
</div>
<div class="flex items-center">
<span class="w-4 h-4 mr-2 rounded-full bg-gradient-to-r from-yellow-400 to-orange-400 dark:from-yellow-600 dark:to-orange-600"></span>
<span class="text-gray-700 dark:text-gray-300">Warning (80-95°C)</span>
</div>
<div class="flex items-center">
<span class="w-4 h-4 mr-2 rounded-full bg-gradient-to-r from-orange-500 to-red-500 dark:from-orange-700 dark:to-red-700"></span>
<span class="text-gray-700 dark:text-gray-300">Critical (> 95°C)</span>
</div>
</div>
</div>
<!-- Footer Section -->
<div class="p-4 sm:p-6 text-center text-gray-500 dark:text-gray-400 text-xs bg-gray-50 dark:bg-gray-850 border-t border-gray-200 dark:border-gray-700">
<p>© 2023 Industrial Insights. All rights reserved. Data updated as of <time datetime="2023-10-27T14:30:00Z">Oct 27, 2023, 2:30 PM UTC</time></p>
<p class="mt-1">Powered by Advanced Sensor Analytics.</p>
</div>
</div>
</div>Related Components
Neumorphic Heat Map Component
A responsive, neumorphic heat map component with a triadic color scheme, designed for business and corporate websites. Features soft shadows and dark mode support, displaying data intensity visually.
E-commerce Heat Map Component - Watercolor Neon
A responsive e-commerce heat map component with a watercolor/artistic style and a neon/electric color scheme, supporting dark mode. It represents product interest or sales data using a grid of glowing cells.
Heat Maps Component
A 3D Heat Map component with an analogous color scheme, suitable for a portfolio. It is responsive and supports dark mode.