Componente Mappe di calore
Un componente reattivo per le mappe di calore con supporto per il tema scuro, costruito con Tailwind CSS. Presenta un layout semplice con elementi minimi, adatto per un blog o per il consumo di contenuti.
Codice HTML
<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>Componenti correlati
Componente Mappe di calore
Un componente di mappe di calore reattivo progettato con glassmorphism e una combinazione di colori analoga per le interfacce dei social media.
Componente Mappe di calore
Un componente Heat Maps reattivo con stile Glassmorphism, combinazione di colori analoga e complessità moderata per un portfolio, con supporto per temi scuri.
Componente Mappe di calore
Un componente di mappa termica reattivo progettato con effetti di vetromorfismo, con elementi traslucidi simili al vetro smerigliato e supporto per lo stile del tema scuro, utilizzando Tailwind CSS.