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 termiche reattivo con stile per la modalità oscura utilizzando Tailwind CSS, con immagini segnaposto casuali e avatar utente.
Componente Mappe di calore
Un componente Heat Maps per il consumo di blog/contenuti, caratterizzato da un design reattivo con supporto per la modalità scura. Utilizza una combinazione di colori in scala di grigi e una complessità media con funzionalità interattive. Niente JavaScript, HTML puro con Tailwind CSS.
Componente Mappe di calore
Un semplice componente per mappe di calore reattivo progettato con un'estetica retrò/vintage utilizzando una combinazione di colori pastello, adatto per cruscotti. È dotato di supporto per il tema scuro con Tailwind CSS.