Luxury_Premium_Heatmap_Component
Un composant de carte thermique triadique élégant et sophistiqué conçu pour les sites Web d’actualités et de journalisme, mettant en valeur la popularité ou l’engagement des articles. Il présente une typographie raffinée, des dégradés subtils et une réactivité totale avec la prise en charge du mode sombre.
HTML Code
<div class="font-sans antialiased bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-200 p-4 sm:p-6 lg:p-8">
<div class="container mx-auto max-w-7xl bg-white dark:bg-gray-850 shadow-xl rounded-xl overflow-hidden">
<div class="p-6 sm:p-8 lg:p-10 border-b border-gray-200 dark:border-gray-700">
<h2 class="text-3xl sm:text-4xl font-semibold mb-2 text-gray-900 dark:text-gray-100 tracking-tight leading-tight">
Top Stories Heatmap
</h2>
<p class="text-lg text-gray-600 dark:text-gray-400 max-w-2xl">
Explore the most engaging articles and popular topics at a glance. Darker shades indicate higher engagement.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 p-6 sm:p-8 lg:p-10">
<!-- Heatmap Item 1 -->
<div class="relative group rounded-lg overflow-hidden transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-lg"
style="background: linear-gradient(to bottom right, #FFD700, #DAA520);">
<div class="absolute inset-0 bg-black bg-opacity-10 group-hover:bg-opacity-0 transition-opacity duration-300"></div>
<div class="p-4 sm:p-5 flex flex-col justify-between h-full">
<div>
<span class="text-xs font-bold uppercase text-gray-900 dark:text-gray-800 tracking-wider mb-1 block">High Engagement</span>
<h3 class="font-bold text-xl sm:text-2xl text-gray-800 dark:text-gray-900 leading-snug mb-2">
<a href="#" class="hover:underline">Global Markets Brace for Economic Shift</a>
</h3>
<p class="text-sm text-gray-700 dark:text-gray-900 leading-relaxed mb-4">
Analysts forecast significant changes in financial landscapes following recent policy announcements...
</p>
</div>
<div class="flex items-center text-sm font-medium text-gray-800 dark:text-gray-900">
<img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2 border border-gray-600 dark:border-gray-800">
<span>By John Doe</span>
</div>
</div>
</div>
<!-- Heatmap Item 2 -->
<div class="relative group rounded-lg overflow-hidden transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-lg"
style="background: linear-gradient(to bottom right, #6A5ACD, #483D8B);">
<div class="absolute inset-0 bg-black bg-opacity-20 group-hover:bg-opacity-0 transition-opacity duration-300"></div>
<div class="p-4 sm:p-5 flex flex-col justify-between h-full">
<div>
<span class="text-xs font-bold uppercase text-gray-100 tracking-wider mb-1 block">Moderate Engagement</span>
<h3 class="font-bold text-xl sm:text-2xl text-gray-50 leading-snug mb-2">
<a href="#" class="hover:underline">Innovations in Sustainable Urban Planning</a>
</h3>
<p class="text-sm text-gray-200 leading-relaxed mb-4">
Cities worldwide are adopting new eco-friendly strategies to enhance livability...
</p>
</div>
<div class="flex items-center text-sm font-medium text-gray-100">
<img src="https://randomuser.me/api/portraits/women/3.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2 border border-gray-300"]
><span>By Jane Smith</span>
</div>
</div>
</div>
<!-- Heatmap Item 3 -->
<div class="relative group rounded-lg overflow-hidden transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-lg"
style="background: linear-gradient(to bottom right, #A0522D, #8B4513);">
<div class="absolute inset-0 bg-black bg-opacity-30 group-hover:bg-opacity-0 transition-opacity duration-300"></div>
<div class="p-4 sm:p-5 flex flex-col justify-between h-full">
<div>
<span class="text-xs font-bold uppercase text-pink-100 tracking-wider mb-1 block">Emerging Topic</span>
<h3 class="font-bold text-xl sm:text-2xl text-pink-50 leading-snug mb-2">
<a href="#" class="hover:underline">The Revival of Artisanal Craftsmanship</a>
</h3>
<p class="text-sm text-pink-100 leading-relaxed mb-4">
A new generation embraces traditional skills, bringing handmade goods back into vogue...
</p>
</div>
<div class="flex items-center text-sm font-medium text-pink-100">
<img src="https://randomuser.me/api/portraits/men/8.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2 border border-pink-300">
<span>By David Lee</span>
</div>
</div>
</div>
<!-- Heatmap Item 4 -->
<div class="relative group rounded-lg overflow-hidden transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-lg hidden xl:block"
style="background: linear-gradient(to bottom right, #FF8C00, #CD6600);">
<div class="absolute inset-0 bg-black bg-opacity-15 group-hover:bg-opacity-0 transition-opacity duration-300"></div>
<div class="p-4 sm:p-5 flex flex-col justify-between h-full">
<div>
<span class="text-xs font-bold uppercase text-amber-900 tracking-wider mb-1 block">High Engagement</span>
<h3 class="font-bold text-xl sm:text-2xl text-amber-800 leading-snug mb-2">
<a href="#" class="hover:underline">Breakthroughs in AI Ethics and Governance</a>
</h3>
<p class="text-sm text-amber-700 leading-relaxed mb-4">
New frameworks are emerging to guide the responsible development of artificial intelligence...
</p>
</div>
<div class="flex items-center text-sm font-medium text-amber-800">
<img src="https://randomuser.me/api/portraits/women/9.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2 border border-amber-600">
<span>By Sarah Chen</span>
</div>
</div>
</div>
<!-- Heatmap Item 5 -->
<div class="relative group rounded-lg overflow-hidden transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-lg hidden md:block"
style="background: linear-gradient(to bottom right, #8A2BE2, #6A0DAD);">
<div class="absolute inset-0 bg-black bg-opacity-25 group-hover:bg-opacity-0 transition-opacity duration-300"></div>
<div class="p-4 sm:p-5 flex flex-col justify-between h-full">
<div>
<span class="text-xs font-bold uppercase text-purple-100 tracking-wider mb-1 block">Moderate Engagement</span>
<h3 class="font-bold text-xl sm:text-2xl text-purple-50 leading-snug mb-2">
<a href="#" class="hover:underline">The Future of Remote Work and Collaboration</a>
</h3>
<p class="text-sm text-purple-100 leading-relaxed mb-4">
Companies are reimagining office dynamics with advanced tools and flexible policies...
</p>
</div>
<div class="flex items-center text-sm font-medium text-purple-100">
<img src="%3A%2F%2Frandomuser.me%2Fapi%2Fportraits%2Fmen%2F12.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2 border border-purple-300">
<span>By Mark Johnson</span>
</div>
</div>
</div>
<!-- Heatmap Item 6 -->
<div class="relative group rounded-lg overflow-hidden transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-lg hidden lg:block"
style="background: linear-gradient(to bottom right, #5F9EA0, #2F4F4F);">
<div class="absolute inset-0 bg-black bg-opacity-35 group-hover:bg-opacity-0 transition-opacity duration-300"></div>
<div class="p-4 sm:p-5 flex flex-col justify-between h-full">
<div>
<span class="text-xs font-bold uppercase text-teal-100 tracking-wider mb-1 block">New Discovery</span>
<h3 class="font-bold text-xl sm:text-2xl text-teal-50 leading-snug mb-2">
<a href="#" class="hover:underline">Unveiling Ancient Civilizations: New Archeological Finds</a>
</h3>
<p class="text-sm text-teal-100 leading-relaxed mb-4">
Recent excavations shed light on previously unknown aspects of ancient history...
</p>
</div>
<div class="flex items-center text-sm font-medium text-teal-100">
<img src="https://randomuser.me/api/portraits/women/10.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2 border border-teal-300">
<span>By Emily White</span>
</div>
</div>
</div>
</div>
<div class="p-6 sm:p-8 lg:p-10 border-t border-gray-200 dark:border-gray-700 text-center">
<p class="text-sm text-gray-500 dark:text-gray-400">
Data updated hourly. For more details, visit our <a href="#" class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-200 font-medium">analytics dashboard</a>.
</p>
</div>
</div>
</div>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 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
Un composant de carte thermique réactif conçu avec des effets de glassmorphism, avec des éléments translucides semblables à du verre dépoli et la prise en charge du style de thème sombre, à l’aide de Tailwind CSS.