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 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 Mappe di calore
Un componente 3D Heat Map con una combinazione di colori analoga, adatto per un portfolio. È reattivo e supporta la modalità oscura.
Componente Mappe di calore
Un componente per mappe di calore monospazio, ispirato agli sviluppatori con toni della terra, progettato per consulenze/servizi. Dispone di un display a griglia che simula i dati della mappa di calore per giorni diversi, reattivo su tutti i dispositivi e supporta la modalità oscura.