Composant Cartes thermiques
Un composant de cartes thermiques réactif conçu avec Tailwind CSS, avec des micro-interactions et la prise en charge des thèmes sombres, à l’aide d’images et d’avatars de repère.
HTML Code
<div class="max-w-4xl mx-auto px-4 py-8">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Heat Maps Overview</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Heat Map Item -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
<img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/400/200?random=1" alt="Heat Map 1">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Population Density</h3>
<p class="text-gray-600 dark:text-gray-400">Visual representation of population density across regions.</p>
</div>
</div>
<!-- Heat Map Item -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
<img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/400/200?random=2" alt="Heat Map 2">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Traffic Patterns</h3>
<p class="text-gray-600 dark:text-gray-400">Analyzing traffic flow across different times of the day.</p>
</div>
</div>
<!-- Heat Map Item -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
<img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/400/200?random=3" alt="Heat Map 3">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Sales Heatmap</h3>
<p class="text-gray-600 dark:text-gray-400">Distribution of sales revenue across various regions.</p>
</div>
</div>
<!-- Heat Map Item -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
<img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/400/200?random=4" alt="Heat Map 4">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Engagement</h3>
<p class="text-gray-600 dark:text-gray-400">Tracking user interaction levels on the website.</p>
</div>
</div>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c;
}
}
</style>Composants associés
Composant de carte thermique neumorphe
Un composant de carte thermique réactif et neumorphe avec une palette de couleurs triadique, conçu pour les sites Web d’entreprise et d’entreprise. Dispose d’ombres douces et d’une prise en charge du mode sombre, affichant visuellement l’intensité des données.
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.
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.