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 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.
Composant Cartes thermiques
Composant Heat Maps avec effets réactifs et prise en charge du thème sombre.
Composant Cartes thermiques
Un composant de cartes thermiques réactif avec une esthétique rétro/vintage, conçu à des fins de blog/contenu, avec des éléments interactifs et la prise en charge du thème sombre.