Cartes thermiques Composante 42
Un composant de carte thermique réactif conçu avec le style Neumorphism à l’aide de Tailwind CSS, prenant en charge le mode sombre et présentant des images et des avatars aléatoires.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gradient-to-r from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 px-4">
<h2 class="text-2xl font-semibold mb-4 text-gray-700 dark:text-gray-300">Heat Map Component</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 w-full max-w-4xl">
<!-- Sample Heat Map Item -->
<div class="flex flex-col items-center justify-center p-4 rounded-lg shadow-lg bg-white dark:bg-gray-700 transition-all duration-300 ease-in-out hover:shadow-xl">
<img class="w-24 h-24 rounded-full mb-2" src="https://picsum.photos/200/200?random=1" alt="Random Image" />
<p class="text-lg font-medium text-gray-800 dark:text-gray-300">Heat Point 1</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Activity Level: High</p>
</div>
<div class="flex flex-col items-center justify-center p-4 rounded-lg shadow-lg bg-white dark:bg-gray-700 transition-all duration-300 ease-in-out hover:shadow-xl">
<img class="w-24 h-24 rounded-full mb-2" src="https://picsum.photos/200/200?random=2" alt="Random Image" />
<p class="text-lg font-medium text-gray-800 dark:text-gray-300">Heat Point 2</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Activity Level: Medium</p>
</div>
<div class="flex flex-col items-center justify-center p-4 rounded-lg shadow-lg bg-white dark:bg-gray-700 transition-all duration-300 ease-in-out hover:shadow-xl">
<img class="w-24 h-24 rounded-full mb-2" src="https://picsum.photos/200/200?random=3" alt="Random Image" />
<p class="text-lg font-medium text-gray-800 dark:text-gray-300">Heat Point 3</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Activity Level: Low</p>
</div>
<!-- More heat map items can be added here -->
</div>
</div>Composants associés
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 conçu dans le style du glassmorphism, avec des tons de terre. La mise en page est simple, composée d’éléments de base destinés à une utilisation professionnelle/d’entreprise, et prend en charge le mode sombre.
Composant Neumorphism Vibrant Heat Maps
Un composant de cartes thermiques réactif avec une conception Neumorphism, utilisant une palette de couleurs vives et une complexité modérée. Comprend la prise en charge du mode sombre et des effets de survol. Construit avec des classes HTML simples et CSS Tailwind, complétées par un petit bloc CSS pour des ombres et des niveaux de couleur Neumorphism personnalisés.