Composant Cartes thermiques
Un composant de cartes thermiques réactives conçu avec une esthétique rétro/vintage, intégrant la prise en charge du thème sombre. Il comporte des sections pour un titre, un sous-titre et une carte avec des zones surlignées par la chaleur, avec des images aléatoires supplémentaires et des avatars pour un look nostalgique.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-2xl mx-auto">
<h2 class="text-3xl font-bold text-center text-purple-800 dark:text-purple-300 mb-2">Heat Maps Data Visualization</h2>
<h4 class="text-lg text-center text-gray-600 dark:text-gray-400 mb-6">Exploring trends with a nostalgic vibe!</h4>
<div class="relative w-full h-64 mb-4 bg-gradient-to-r from-pink-300 via-purple-400 to-blue-500 rounded-lg overflow-hidden">
<img src="https://picsum.photos/600/400" alt="Heat Map" class="absolute inset-0 object-cover w-full h-full opacity-80">
<div class="absolute top-0 left-0 right-0 bottom-0 flex justify-center items-center">
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
<h3 class="text-lg font-semibold text-purple-800 dark:text-purple-300">Active Areas</h3>
<ul class="mt-2 space-y-2">
<li class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-300">User 1: 35%</span>
</li>
<li class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-300">User 2: 50%</span>
</li>
<li class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-300">User 3: 20%</span>
</li>
</ul>
</div>
</div>
</div>
<p class="text-center text-gray-600 dark:text-gray-400">Explore the data trends with a touch from the 80s and 90s!</p>
</div>Composants associés
Composant Cartes thermiques
Un composant de cartes thermiques réactif conçu pour le mode sombre à l’aide de Tailwind CSS, avec des images de remplacement aléatoires et des avatars d’utilisateurs.
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é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.