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.
Codice HTML
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 max-w-md mx-auto">
<h2 class="text-2xl font-bold text-center text-pink-600 dark:text-pink-300">Heat Map</h2>
<div class="mt-4 grid grid-cols-3 gap-2">
<div class="bg-blue-300 dark:bg-blue-700 h-24 rounded-lg flex items-center justify-center">
<img src="https://picsum.photos/100/100" alt="Sample Image" class="rounded-full border-4 border-white">
</div>
<div class="bg-green-300 dark:bg-green-700 h-24 rounded-lg flex items-center justify-center">
<img src="https://picsum.photos/101/100" alt="Sample Image" class="rounded-full border-4 border-white">
</div>
<div class="bg-yellow-300 dark:bg-yellow-700 h-24 rounded-lg flex items-center justify-center">
<img src="https://picsum.photos/102/100" alt="Sample Image" class="rounded-full border-4 border-white">
</div>
<div class="bg-pink-300 dark:bg-pink-700 h-24 rounded-lg flex items-center justify-center">
<img src="https://picsum.photos/103/100" alt="Sample Image" class="rounded-full border-4 border-white">
</div>
<div class="bg-purple-300 dark:bg-purple-700 h-24 rounded-lg flex items-center justify-center">
<img src="https://picsum.photos/104/100" alt="Sample Image" class="rounded-full border-4 border-white">
</div>
<div class="bg-red-300 dark:bg-red-700 h-24 rounded-lg flex items-center justify-center">
<img src="https://picsum.photos/105/100" alt="Sample Image" class="rounded-full border-4 border-white">
</div>
</div>
<div class="mt-4 flex justify-between items-center">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-4 border-white">
<span class="ml-2 text-gray-700 dark:text-gray-300">User: John Doe</span>
</div>
<button class="bg-pink-500 dark:bg-pink-600 text-white font-semibold py-2 px-4 rounded">Action</button>
</div>
</div>Componenti correlati
Componente Mappe di calore
Un componente Heat Maps progettato in stile Brutalismo con toni della Terra, complessità moderata e design reattivo con supporto per temi scuri.
Mappe di calore Componente 42
Un componente di mappa di calore reattivo progettato con lo stile Neumorphism utilizzando Tailwind CSS, che supporta la modalità oscura e presenta immagini e avatar casuali.
Componente Mappe di calore
Un componente Heat Maps progettato con lo stile glassmorphism, con toni della terra. Il layout è semplice, composto da elementi di base destinati all'uso aziendale/aziendale e supporta la modalità oscura.