Composant Cartes thermiques
Composant Heat Maps avec effets réactifs et prise en charge du thème sombre.
HTML Code
<div class="bg-gray-900 text-white p-8">
<h2 class="text-2xl font-bold mb-4">Heat Map</h2>
<div class="grid grid-cols-7 gap-1">
<!-- Days of the week -->
<div class="text-center text-sm text-gray-400">Sun</div>
<div class="text-center text-sm text-gray-400">Mon</div>
<div class="text-center text-sm text-gray-400">Tue</div>
<div class="text-center text-sm text-gray-400">Wed</div>
<div class="text-center text-sm text-gray-400">Thu</div>
<div class="text-center text-sm text-gray-400">Fri</div>
<div class="text-center text-sm text-gray-400">Sat</div>
<!-- Heat map squares (example data) -->
{[...Array(42)].map((_, i) => (
`<div key=${i} class="h-8 bg-gray-700 rounded heat-square data-level-{{
(
() => {
const random = Math.random();
if (random < 0.4) return 1; /* low activity */
if (random < 0.7) return 2; /* medium activity */
if (random < 0.9) return 3; /* high activity */
return 4; /* very high activity */
}
)()
}}"></div>`
)).join("")}
</div>
<style>
.heat-square[data-level="1"] {
background-color: #1e3a8a; /* blue-900 */
}
.heat-square[data-level="2"] {
background-color: #1d4ed8; /* blue-700 */
}
.heat-square[data-level="3"] {
background-color: #3b82f6; /* blue-500 */
}
.heat-square[data-level="4"] {
background-color: #60a5fa; /* blue-400 */
}
/* Responsive adjustments */
@media (max-width: 768px) {
.grid-cols-7 {
grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
}
.heat-square {
height: 40px;
}
}
</style>
</div>Composants associés
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.
Cartes thermiques Composante 42
Un composant de carte thermique réactif conçu avec le style Neumorphism à l’aide de Tailwind CSS, prenant en charge le mode sombre et présentant des images et des avatars aléatoires.
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.