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.
HTML Code
<div class="bg-gray-900 text-white p-8 rounded-lg shadow-lg">
<h2 class="text-3xl font-bold text-center mb-6">Heat Maps Overview</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg p-4">
<h3 class="text-xl font-semibold">Popular Topics</h3>
<ul class="mt-2">
<li class="py-2 border-b border-gray-700 hover:bg-gray-800 transition">Topic 1 - <span class="font-medium">75%</span></li>
<li class="py-2 border-b border-gray-700 hover:bg-gray-800 transition">Topic 2 - <span class="font-medium">65%</span></li>
<li class="py-2 border-b border-gray-700 hover:bg-gray-800 transition">Topic 3 - <span class="font-medium">55%</span></li>
<li class="py-2 border-b border-gray-700 hover:bg-gray-800 transition">Topic 4 - <span class="font-medium">85%</span></li>
</ul>
</div>
<div class="bg-gradient-to-r from-blue-400 to-green-400 rounded-lg p-4">
<h3 class="text-xl font-semibold">Recent Reads</h3>
<div class="flex flex-col space-y-4 mt-2">
<div class="flex items-center border border-gray-700 rounded p-2 hover:bg-gray-800 transition">
<img src="https://picsum.photos/50/50" alt="Avatar" class="rounded-full mr-3">
<div>
<h4 class="text-lg font-medium">Article Title 1</h4>
<p class="text-sm text-gray-400">Author Name</p>
</div>
</div>
<div class="flex items-center border border-gray-700 rounded p-2 hover:bg-gray-800 transition">
<img src="https://picsum.photos/50/50" alt="Avatar" class="rounded-full mr-3">
<div>
<h4 class="text-lg font-medium">Article Title 2</h4>
<p class="text-sm text-gray-400">Author Name</p>
</div>
</div>
</div>
</div>
</div>
<div class="mt-6">
<h3 class="text-2xl font-bold text-center">Interactive Heat Map</h3>
<div class="relative mt-4">
<img src="https://picsum.photos/800/400" alt="Heat Map" class="w-full h-auto rounded-lg">
<div class="absolute top-0 left-0 right-0 bottom-0 flex justify-between items-center">
<div class="p-2 bg-red-500 bg-opacity-75 rounded-full cursor-pointer hover:scale-105 transform transition">
<p class="text-white font-semibold">High Interest</p>
</div>
<div class="p-2 bg-yellow-500 bg-opacity-75 rounded-full cursor-pointer hover:scale-105 transform transition">
<p class="text-white font-semibold">Moderate Interest</p>
</div>
<div class="p-2 bg-green-500 bg-opacity-75 rounded-full cursor-pointer hover:scale-105 transform transition">
<p class="text-white font-semibold">Low Interest</p>
</div>
</div>
</div>
</div>
</div>
Composants associés
Composant de carte thermique e-commerce - Aquarelle Neon
Un composant de carte thermique de commerce électronique réactif avec un style aquarelle/artistique et une palette de couleurs néon/électrique, prenant en charge le mode sombre. Il représente l’intérêt du produit ou les données de vente à l’aide d’une grille de cellules lumineuses.
Composant Cartes thermiques
Un composant de carte thermique ludique et amusant pour les sites Web d’actualités et de journalisme, avec un design lumineux et joyeux avec des éléments arrondis et une esthétique conviviale, en utilisant une palette de couleurs bleues d’entreprise. Comprend la réactivité et la prise en charge du mode sombre.
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.