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.
Codice HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 backdrop-blur-lg rounded-xl shadow-lg p-6 md:w-1/2 w-full">
<h2 class="text-center text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Heat Maps Component</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
<img src="https://picsum.photos/300/200" alt="Heat map" class="object-cover w-full h-full rounded-lg">
</div>
<div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
<img src="https://picsum.photos/300/201" alt="Heat map" class="object-cover w-full h-full rounded-lg">
</div>
<div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
<img src="https://picsum.photos/300/202" alt="Heat map" class="object-cover w-full h-full rounded-lg">
</div>
<div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
<img src="https://picsum.photos/300/203" alt="Heat map" class="object-cover w-full h-full rounded-lg">
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
<p class="text-gray-800 dark:text-gray-200 font-medium">User 1</p>
</div>
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
<p class="text-gray-800 dark:text-gray-200 font-medium">User 2</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 minimalista per le mappe di calore che mostra un portfolio con funzionalità interattive, design reattivo e supporto per temi scuri utilizzando Tailwind CSS.
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.