Cartes thermiques Composante 18
Un composant de carte thermique réactif conçu dans un style brutalisme avec un contraste élevé, avec des images de remplacement et la prise en charge d’avatar pour le mode sombre.
HTML Code
<div class="flex flex-col bg-gray-100 dark:bg-gray-800 p-6 rounded-lg">
<h2 class="text-2xl font-bold text-black dark:text-white mb-4">Heat Maps Overview</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="relative bg-red-400 p-4 rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/200?random=1" alt="Heat Map 1" class="absolute inset-0 w-full h-full object-cover opacity-50 rounded-lg">
<div class="relative z-10 text-black dark:text-white">
<h3 class="text-xl font-bold">Region A</h3>
<p>High Activity</p>
</div>
</div>
<div class="relative bg-yellow-400 p-4 rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/200?random=2" alt="Heat Map 2" class="absolute inset-0 w-full h-full object-cover opacity-50 rounded-lg">
<div class="relative z-10 text-black dark:text-white">
<h3 class="text-xl font-bold">Region B</h3>
<p>Moderate Activity</p>
</div>
</div>
<div class="relative bg-green-400 p-4 rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/200?random=3" alt="Heat Map 3" class="absolute inset-0 w-full h-full object-cover opacity-50 rounded-lg">
<div class="relative z-10 text-black dark:text-white">
<h3 class="text-xl font-bold">Region C</h3>
<p>Low Activity</p>
</div>
</div>
<div class="relative bg-blue-400 p-4 rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/200?random=4" alt="Heat Map 4" class="absolute inset-0 w-full h-full object-cover opacity-50 rounded-lg">
<div class="relative z-10 text-black dark:text-white">
<h3 class="text-xl font-bold">Region D</h3>
<p>Very Low Activity</p>
</div>
</div>
</div>
<div class="mt-6">
<h2 class="text-xl font-bold text-black dark:text-white mb-2">User Avatars</h2>
<div class="flex flex-wrap gap-4">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar 1">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar 2">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar 3">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar 4">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar 5">
</div>
</div>
</div>Composants associés
Composant Cartes thermiques
Un composant de carte thermique simple et réactif conçu avec une esthétique rétro/vintage utilisant une palette de couleurs pastel, adapté aux tableaux de bord. Il propose la prise en charge des thèmes sombres avec Tailwind CSS.
Composant Cartes thermiques
Composant réactif de cartes thermiques en mode sombre pour la visualisation des données sur un tableau de bord, à l’aide d’un jeu de couleurs triadique.
Composant Cartes thermiques
Un composant de cartes thermiques réactives conçu avec une esthétique rétro/vintage, intégrant la prise en charge du thème sombre. Il comporte des sections pour un titre, un sous-titre et une carte avec des zones surlignées par la chaleur, avec des images aléatoires supplémentaires et des avatars pour un look nostalgique.