Heat Maps Component
A playful and fun heat map component for news and journalism websites, featuring bright, cheerful design with rounded elements and friendly aesthetics, using a corporate blue color scheme. Includes responsiveness and dark mode support.
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>Related Components
Luxury_Premium_Heatmap_Component
An elegant and sophisticated triadic-colored heatmap component designed for news and journalism websites, showcasing article popularity or engagement. It features refined typography, subtle gradients, and full responsiveness with dark mode support.
Heat Maps Component
A 3D Heat Map component with an analogous color scheme, suitable for a portfolio. It is responsive and supports dark mode.
Heat Maps Component
A Heat Maps Component for blog/content consumption, featuring a responsive design with dark mode support. Utilizes grayscale color scheme and medium complexity with interactive features. No JavaScript, pure HTML with Tailwind CSS.