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 cartes thermiques réactives conçu avec une esthétique rétro/vintage, intégrant la prise en charge du thème sombre. Il comporte des sections pour un titre, un sous-titre et une carte avec des zones surlignées par la chaleur, avec des images aléatoires supplémentaires et des avatars pour un look nostalgique.
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 Neumorphism Vibrant Heat Maps
Un composant de cartes thermiques réactif avec une conception Neumorphism, utilisant une palette de couleurs vives et une complexité modérée. Comprend la prise en charge du mode sombre et des effets de survol. Construit avec des classes HTML simples et CSS Tailwind, complétées par un petit bloc CSS pour des ombres et des niveaux de couleur Neumorphism personnalisés.