Composant Cartes thermiques
Un composant de cartes thermiques pour la consommation de blog/contenu, avec un design réactif avec prise en charge du mode sombre. Utilise une palette de couleurs en niveaux de gris et une complexité moyenne avec des fonctionnalités interactives. Pas de JavaScript, du HTML pur avec Tailwind CSS.
HTML Code
<div class="bg-gray-900 min-h-screen p-8">
<div class="max-w-7xl mx-auto">
<h1 class="text-3xl font-bold text-white mb-8">Article Heatmap: Engagement Over Time</h1>
<div class="bg-gray-800 rounded-lg shadow-lg p-6 mb-8">
<div class="grid grid-cols-1 md:grid-cols-7 gap-2">
</div>
<!-- Heatmap Grid -->
<div class="col-span-full grid grid-cols-21 gap-1">
<!-- Days of the week -->
<div class="col-span-1"></div> <!-- Empty corner -->
<div class="col-span-2 text-gray-400 text-xs text-center">Mon</div>
<div class="col-span-3 text-gray-400 text-xs text-center">Tue</div>
<div class="col-span-3 text-gray-400 text-xs text-center">Wed</div>
<div class="col-span-3 text-gray-400 text-xs text-center">Thu</div>
<div class="col-span-3 text-gray-400 text-xs text-center">Fri</div>
<div class="col-span-3 text-gray-400 text-xs text-center">Sat</div>
<div class="col-span-3 text-gray-400 text-xs text-center">Sun</div>
<!-- Sample Heatmap Cells (dynamic content would go here) -->
<!-- Weeks as rows -->
{[...Array(5)].map((_, weekIndex) => (
<>
<div class="col-span-1 text-gray-400 text-xs text-right pr-2">Week {weekIndex + 1}</div>
{[...Array(20)].map((_, dayIndex) => (
<div
key={dayIndex}
class={
`col-span-1 h-5 rounded-sm
${dayIndex % 7 === 0 ? "bg-gray-900" : ""}
${dayIndex % 7 === 1 ? "bg-gray-700" : ""}
${dayIndex % 7 === 2 ? "bg-gray-600" : ""}
${dayIndex % 7 === 3 ? "bg-gray-500" : ""}
${dayIndex % 7 === 4 ? "bg-gray-400" : ""}
${dayIndex % 7 === 5 ? "bg-gray-300" : ""}
${dayIndex % 7 === 6 ? "bg-gray-200" : ""}
`
}
title="Engagement: X"
></div>
))}
</>
))}
</div>
<!-- Color Key -->
<div class="col-span-full flex justify-end items-center mt-4 text-gray-400 text-sm">
Less
<div class="flex ml-2">
<div class="h-4 w-4 bg-gray-900 rounded-sm mr-1"></div>
<div class="h-4 w-4 bg-gray-700 rounded-sm mr-1"></div>
<div class="h-4 w-4 bg-gray-600 rounded-sm mr-1"></div>
<div class="h-4 w-4 bg-gray-500 rounded-sm mr-1"></div>
<div class="h-4 w-4 bg-gray-400 rounded-sm mr-1"></div>
<div class="h-4 w-4 bg-gray-300 rounded-sm mr-1"></div>
<div class="h-4 w-4 bg-gray-200 rounded-sm mr-1"></div>
</div>
More
</div>
</div>
</div>
<!-- Example Article List (for context) -->
<div class="bg-gray-800 rounded-lg shadow-lg p-6">
<h2 class="text-xl font-bold text-white mb-4">Top Articles This Week</h2>
<ul class="divide-y divide-gray-700">
<li class="py-3 flex items-center">
<img src="https://picsum.photos/id/101/60/60" alt="Article thumbnail" class="w-16 h-16 object-cover rounded-md mr-4">
<div>
<p class="text-white font-semibold">The Future of AI in Content Creation</p>
<p class="text-gray-400 text-sm">2,345 views - 12 comments</p>
</div>
</li>
<li class="py-3 flex items-center">
<img src="https://picsum.photos/id/102/60/60" alt="Article thumbnail" class="w-16 h-16 object-cover rounded-md mr-4">
<div>
<p class="text-white font-semibold">Understanding SEO: A Comprehensive Guide</p>
<p class="text-gray-400 text-sm">1,876 views - 8 comments</p>
</div>
</li>
<li class="py-3 flex items-center">
<img src="https://picsum.photos/id/103/60/60" alt="Article thumbnail" class="w-16 h-16 object-cover rounded-md mr-4">
<div>
<p class="text-white font-semibold">Mastering Responsive Web Design</p>
<p class="text-gray-400 text-sm">1,502 views - 5 comments</p>
</div>
</li>
</ul>
</div>
</div>
</div>Composants associés
Composant Cartes thermiques
Un composant de carte thermique réactif pour les applications industrielles/manufacturières, avec un design inspiré du papier/de l’impression et une palette de couleurs océan/bleu. Inclut la prise en charge du mode sombre et du HTML sémantique.
Composant Cartes thermiques
Un composant de cartes thermiques conçu dans un style brutaliste avec des tons Terre, une complexité modérée et un design réactif avec prise en charge du thème sombre.
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.