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.
HTML Code
<div class="bg-gray-900 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-white mb-4">Heat Maps Component</h2>
<div class="grid grid-cols-3 gap-4">
<div class="bg-blue-500 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105 dark:bg-blue-700">
<h3 class="text-lg font-semibold text-white">Category 1</h3>
<img src="https://picsum.photos/200/100?random=1" alt="Random Image" class="rounded mt-2" />
<p class="text-white mt-2">Heat Level: High</p>
</div>
<div class="bg-orange-500 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105 dark:bg-orange-700">
<h3 class="text-lg font-semibold text-white">Category 2</h3>
<img src="https://picsum.photos/200/100?random=2" alt="Random Image" class="rounded mt-2" />
<p class="text-white mt-2">Heat Level: Medium</p>
</div>
<div class="bg-green-500 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105 dark:bg-green-700">
<h3 class="text-lg font-semibold text-white">Category 3</h3>
<img src="https://picsum.photos/200/100?random=3" alt="Random Image" class="rounded mt-2" />
<p class="text-white mt-2">Heat Level: Low</p>
</div>
</div>
<footer class="mt-6 text-center">
<p class="text-gray-400">Data visualizations based on real-time data</p>
<div class="flex justify-center mt-4 space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full" />
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full" />
</div>
</footer>
</div>Composants associés
Luxury_Premium_Heatmap_Component
Un composant de carte thermique triadique élégant et sophistiqué conçu pour les sites Web d’actualités et de journalisme, mettant en valeur la popularité ou l’engagement des articles. Il présente une typographie raffinée, des dégradés subtils et une réactivité totale avec la prise en charge du mode 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.
Composant Cartes thermiques
Un composant de cartes thermiques réactif avec un style Glassmorphism, une palette de couleurs analogue et une complexité modérée pour un portfolio, avec prise en charge du thème sombre.