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 cartes thermiques réactif avec prise en charge du thème sombre, construit avec Tailwind CSS. Il présente une mise en page simple avec un minimum d’éléments, adaptée à un blog ou à la consommation de contenu.
Composant Cartes thermiques
Composant Heat Maps avec effets réactifs et prise en charge du thème sombre.
Composant Cartes thermiques
Un composant de carte thermique réactif pour les applications industrielles/manufacturières, avec un design inspiré du papier/de l’impression et une palette de couleurs océan/bleu. Inclut la prise en charge du mode sombre et du HTML sémantique.