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.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-blue-50 dark:bg-gray-900 min-h-screen font-sans">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-blue-900 dark:text-blue-100 mb-4 sm:mb-6 lg:mb-8 text-center">
Today's Hottest Topics
</h2>
<p class="text-lg text-blue-700 dark:text-blue-300 mb-8 sm:mb-10 lg:mb-12 text-center max-w-2xl mx-auto">
Explore the most engaging and talked-about stories right now. The bigger the bubble, the more buzz it's generating!
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">
<!-- Heat Map Item 1 -->
<div class="relative flex items-center justify-center p-6 rounded-3xl bg-white dark:bg-gray-800 shadow-xl transition-transform transform hover:scale-105 duration-300 ease-in-out">
<div class="absolute inset-0 rounded-3xl opacity-20 bg-blue-500 dark:bg-blue-600 scale-125 blur-xl"></div>
<div class="relative z-10 text-center">
<div class="w-32 h-32 sm:w-40 sm:h-40 rounded-full flex items-center justify-center bg-blue-100 dark:bg-blue-700 mx-auto mb-4 scale-animation">
<span class="text-5xl sm:text-6xl font-bold text-blue-800 dark:text-blue-200">95%</span>
</div>
<h3 class="text-2xl sm:text-3xl font-bold text-blue-900 dark:text-blue-100 mb-2">Climate Solutions</h3>
<p class="text-blue-700 dark:text-blue-300 text-sm sm:text-base">New report highlights renewable energy breakthroughs.</p>
<a href="#" class="mt-4 inline-flex items-center text-blue-600 dark:text-blue-400 font-semibold hover:text-blue-800 dark:hover:text-blue-200 transition-colors duration-200">
Read More
<svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
</div>
</div>
<!-- Heat Map Item 2 -->
<div class="relative flex items-center justify-center p-6 rounded-3xl bg-white dark:bg-gray-800 shadow-xl transition-transform transform hover:scale-105 duration-300 ease-in-out">
<div class="absolute inset-0 rounded-3xl opacity-20 bg-blue-400 dark:bg-blue-500 scale-105 blur-xl"></div>
<div class="relative z-10 text-center">
<div class="w-24 h-24 sm:w-32 sm:h-32 rounded-full flex items-center justify-center bg-blue-100 dark:bg-blue-700 mx-auto mb-4 scale-animation">
<span class="text-4xl sm:text-5xl font-bold text-blue-800 dark:text-blue-200">78%</span>
</div>
<h3 class="text-2xl sm:text-2xl font-bold text-blue-900 dark:text-blue-100 mb-2">Global Economy Shift</h3>
<p class="text-blue-700 dark:text-blue-300 text-sm sm:text-base">Markets react to emerging trade policies.</p>
<a href="#" class="mt-4 inline-flex items-center text-blue-600 dark:text-blue-400 font-semibold hover:text-blue-800 dark:hover:text-blue-200 transition-colors duration-200">
Read More
<svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
</div>
</div>
<!-- Heat Map Item 3 -->
<div class="relative flex items-center justify-center p-6 rounded-3xl bg-white dark:bg-gray-800 shadow-xl transition-transform transform hover:scale-105 duration-300 ease-in-out">
<div class="absolute inset-0 rounded-3xl opacity-20 bg-blue-300 dark:bg-blue-400 scale-95 blur-xl"></div>
<div class="relative z-10 text-center">
<div class="w-20 h-20 sm:w-28 sm:h-28 rounded-full flex items-center justify-center bg-blue-100 dark:bg-blue-700 mx-auto mb-4 scale-animation">
<span class="text-3xl sm:text-4xl font-bold text-blue-800 dark:text-blue-200">62%</span>
</div>
<h3 class="text-xl sm:text-2xl font-bold text-blue-900 dark:text-blue-100 mb-2">Tech Innovation Boom</h3>
<p class="text-blue-700 dark:text-blue-300 text-sm sm:text-base">AI advancements reshape daily life.</p>
<a href="#" class="mt-4 inline-flex items-center text-blue-600 dark:text-blue-400 font-semibold hover:text-blue-800 dark:hover:text-blue-200 transition-colors duration-200">
Read More
<svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
</div>
</div>
<!-- Heat Map Item 4 -->
<div class="relative flex items-center justify-center p-6 rounded-3xl bg-white dark:bg-gray-800 shadow-xl transition-transform transform hover:scale-105 duration-300 ease-in-out">
<div class="absolute inset-0 rounded-3xl opacity-20 bg-blue-200 dark:bg-blue-300 scale-90 blur-xl"></div>
<div class="relative z-10 text-center">
<div class="w-16 h-16 sm:w-24 sm:h-24 rounded-full flex items-center justify-center bg-blue-100 dark:bg-blue-700 mx-auto mb-4 scale-animation">
<span class="text-2xl sm:text-3xl font-bold text-blue-800 dark:text-blue-200">45%</span>
</div>
<h3 class="text-xl sm:text-xl font-bold text-blue-900 dark:text-blue-100 mb-2">Health & Wellness</h3>
<p class="text-blue-700 dark:text-blue-300 text-sm sm:text-base">New trends in mental health.</p>
<a href="#" class="mt-4 inline-flex items-center text-blue-600 dark:text-blue-400 font-semibold hover:text-blue-800 dark:hover:text-blue-200 transition-colors duration-200">
Read More
<svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
</div>
</div>
<!-- Heat Map Item 5 -->
<div class="relative flex items-center justify-center p-6 rounded-3xl bg-white dark:bg-gray-800 shadow-xl transition-transform transform hover:scale-105 duration-300 ease-in-out">
<div class="absolute inset-0 rounded-3xl opacity-20 bg-blue-100 dark:bg-blue-200 scale-85 blur-xl"></div>
<div class="relative z-10 text-center">
<div class="w-12 h-12 sm:w-20 sm:h-20 rounded-full flex items-center justify-center bg-blue-100 dark:bg-blue-700 mx-auto mb-4 scale-animation">
<span class="text-xl sm:text-2xl font-bold text-blue-800 dark:text-blue-200">28%</span>
</div>
<h3 class="text-lg sm:text-xl font-bold text-blue-900 dark:text-blue-100 mb-2">Space Exploration</h3>
<p class="text-blue-700 dark:text-blue-300 text-sm sm:text-base">New missions planned for Mars.</p>
<a href="#" class="mt-4 inline-flex items-center text-blue-600 dark:text-blue-400 font-semibold hover:text-blue-800 dark:hover:text-blue-200 transition-colors duration-200">
Read More
<svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
</div>
</div>
<!-- Heat Map Item 6 -->
<div class="relative flex items-center justify-center p-6 rounded-3xl bg-white dark:bg-gray-800 shadow-xl transition-transform transform hover:scale-105 duration-300 ease-in-out">
<div class="absolute inset-0 rounded-3xl opacity-20 bg-blue-50 dark:bg-blue-100 scale-80 blur-xl"></div>
<div class="relative z-10 text-center">
<div class="w-8 h-8 sm:w-16 sm:h-16 rounded-full flex items-center justify-center bg-blue-100 dark:bg-blue-700 mx-auto mb-4 scale-animation">
<span class="text-lg sm:text-xl font-bold text-blue-800 dark:text-blue-200">15%</span>
</div>
<h3 class="text-lg sm:text-xl font-bold text-blue-900 dark:text-blue-100 mb-2">Cultural Trends</h3>
<p class="text-blue-700 dark:text-blue-300 text-sm sm:text-base">Popular music genres evolving.</p>
<a href="#" class="mt-4 inline-flex items-center text-blue-600 dark:text-blue-400 font-semibold hover:text-blue-800 dark:hover:text-blue-200 transition-colors duration-200">
Read More
<svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
</div>
</div>
</div>
<div class="mt-12 sm:mt-16 lg:mt-20 text-center">
<a href="#" class="px-8 py-3 rounded-full bg-gradient-to-r from-blue-600 to-blue-700 text-white font-bold text-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out dark:from-blue-700 dark:to-blue-800">
Explore All Topics
</a>
</div>
</div>
</div>
<style>
/* This is a simple animation for the circles, typically done via JS for dynamic content,
but for a static HTML component, CSS animation can simulate a 'pulse' or 'grow' effect. */
@keyframes scalePulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.scale-animation {
animation: scalePulse 2s infinite ease-in-out;
}
</style>Composants associés
Composant Cartes thermiques
Un composant de carte thermique 3D réactif avec des couleurs complémentaires, adapté à la consommation de blogs et de contenus, avec prise en charge du mode sombre.
Composant Cartes thermiques
Un composant de carte thermique simple et réactif conçu avec une esthétique rétro/vintage utilisant une palette de couleurs pastel, adapté aux tableaux de bord. Il propose la prise en charge des thèmes sombres avec Tailwind CSS.
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.