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.
Codice HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-800 dark:bg-gray-900 p-4">
<div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-lg border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-6 w-full max-w-md">
<h2 class="text-2xl font-semibold text-gray-900 dark:text-white text-center mb-4">Heat Maps Overview</h2>
<div class="grid grid-cols-2 gap-2">
<div class="p-4 bg-red-200 rounded-lg dark:bg-red-600 flex items-center justify-center">
<img src="https://picsum.photos/100/100?random=1" alt="Sample Image" class="rounded-full border-2 border-white dark:border-gray-900">
<p class="text-gray-800 dark:text-white ml-2">John Doe</p>
</div>
<div class="p-4 bg-green-200 rounded-lg dark:bg-green-600 flex items-center justify-center">
<img src="https://picsum.photos/100/100?random=2" alt="Sample Image" class="rounded-full border-2 border-white dark:border-gray-900">
<p class="text-gray-800 dark:text-white ml-2">Jane Smith</p>
</div>
<div class="p-4 bg-blue-200 rounded-lg dark:bg-blue-600 flex items-center justify-center">
<img src="https://picsum.photos/100/100?random=3" alt="Sample Image" class="rounded-full border-2 border-white dark:border-gray-900">
<p class="text-gray-800 dark:text-white ml-2">Alice Johnson</p>
</div>
<div class="p-4 bg-yellow-200 rounded-lg dark:bg-yellow-600 flex items-center justify-center">
<img src="https://picsum.photos/100/100?random=4" alt="Sample Image" class="rounded-full border-2 border-white dark:border-gray-900">
<p class="text-gray-800 dark:text-white ml-2">Bob Lee</p>
</div>
</div>
</div>
</div>Componenti correlati
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 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.
Componente della mappa di calore neumorfica
Un componente di mappa termica neumorfica reattivo con una combinazione di colori triadica, progettato per siti Web aziendali e aziendali. Presenta ombre morbide e supporto per la modalità oscura, visualizzando visivamente l'intensità dei dati.