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 de carte thermique propre, inspiré du code, avec des tons sépia/bruns pour les actualités/le journalisme. Affiche les niveaux d’activité quotidienne avec des polices monospace et une esthétique terminale, avec prise en charge du mode sombre et réactivité totale.
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
Un composant de cartes thermiques réactives conçu avec glassmorphism et une palette de couleurs analogue pour les interfaces de médias sociaux.