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
Composant Cartes thermiques
Un composant de cartes thermiques pour la consommation de blog/contenu, avec un design réactif avec prise en charge du mode sombre. Utilise une palette de couleurs en niveaux de gris et une complexité moyenne avec des fonctionnalités interactives. Pas de JavaScript, du HTML pur avec Tailwind CSS.
Composant Cartes thermiques
Un composant de cartes thermiques conçu avec un style brutaliste avec un contraste élevé et des mises en page inhabituelles utilisant Tailwind CSS. Il prend en charge les effets réactifs et un thème sombre.
Composant Cartes thermiques
Un composant de cartes thermiques réactives conçu avec glassmorphism et une palette de couleurs analogue pour les interfaces de médias sociaux.