Composant de carte thermique neumorphe
Un composant de carte thermique réactif et neumorphe avec une palette de couleurs triadique, conçu pour les sites Web d’entreprise et d’entreprise. Dispose d’ombres douces et d’une prise en charge du mode sombre, affichant visuellement l’intensité des données.
HTML Code
<div class="p-4 sm:p-6 md:p-8 lg:p-10 min-h-screen flex items-center justify-center bg-gray-200 dark:bg-gray-900 transition-colors duration-300">
<div class="w-full max-w-4xl bg-gray-200 dark:bg-gray-850 p-6 sm:p-8 rounded-2xl shadow-xl dark:shadow-xl-dark transition-all duration-300 transform
neumorphic-light dark:neumorphic-dark
border border-gray-300 dark:border-gray-700">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-sm">Website Activity Heatmap</h2>
<div class="relative inline-block text-left">
<button type="button" class="inline-flex justify-center w-full rounded-xl border border-gray-300 dark:border-gray-700 shadow-sm px-4 py-2 bg-gray-200 dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-300 neumorphic-button-light dark:neumorphic-button-dark" id="menu-button" aria-expanded="true" aria-haspopup="true">
Last 30 Days
<svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<div class="overflow-x-auto pb-4">
<div class="grid grid-cols-7 gap-2 sm:gap-3 lg:gap-4 min-w-[500px]">
<!-- Days Row -->
<div class="text-center text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-semibold">Mon</div>
<div class="text-center text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-semibold">Tue</div>
<div class="text-center text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-semibold">Wed</div>
<div class="text-center text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-semibold">Thu</div>
<div class="text-center text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-semibold">Fri</div>
<div class="text-center text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-semibold">Sat</div>
<div class="text-center text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-semibold">Sun</div>
<!-- Heatmap Grid Cells -->
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-70" style="--intensity: 0.1;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-80" style="--intensity: 0.8;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-90" style="--intensity: 0.9;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-50" style="--intensity: 0.5;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-70" style="--intensity: 0.7;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-30" style="--intensity: 0.3;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-20" style="--intensity: 0.2;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-60" style="--intensity: 0.6;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-90" style="--intensity: 0.9;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-80" style="--intensity: 0.8;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-70" style="--intensity: 0.7;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-90" style="--intensity: 0.9;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-40" style="--intensity: 0.4;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-10" style="--intensity: 0.1;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-80" style="--intensity: 0.8;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-95" style="--intensity: 0.95;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-100" style="--intensity: 1.0;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-85" style="--intensity: 0.85;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-90" style="--intensity: 0.9;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-50" style="--intensity: 0.5;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-20" style="--intensity: 0.2;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-70" style="--intensity: 0.7;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-80" style="--intensity: 0.8;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-70" style="--intensity: 0.7;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-60" style="--intensity: 0.6;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-70" style="--intensity: 0.7;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-30" style="--intensity: 0.3;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-10" style="--intensity: 0.1;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-50" style="--intensity: 0.5;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-60" style="--intensity: 0.6;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-50" style="--intensity: 0.5;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-40" style="--intensity: 0.4;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-50" style="--intensity: 0.5;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-20" style="--intensity: 0.2;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-5" style="--intensity: 0.05;"></div>
</div>
</div>
<div class="mt-6 flex flex-col sm:flex-row justify-between items-center text-gray-700 dark:text-gray-300 text-sm">
<div class="flex items-center space-x-2 mb-4 sm:mb-0">
<span class="font-medium">Intensity:</span>
<div class="w-16 h-4 rounded-full bg-blue-300 dark:bg-blue-600 neumorphic-inner-light dark:neumorphic-inner-dark"></div>
<div class="w-16 h-4 rounded-full bg-blue-500 dark:bg-blue-500 neumorphic-inner-light dark:neumorphic-inner-dark"></div>
<div class="w-16 h-4 rounded-full bg-blue-700 dark:bg-blue-400 neumorphic-inner-light dark:neumorphic-inner-dark"></div>
<span>Low</span>
<span>High</span>
</div>
<p class="text-center sm:text-right">Last updated: <span class="font-semibold">Yesterday, 3:45 PM</span></p>
</div>
<style>
/* Base background color and custom properties for neumorphism */
.bg-gray-850 {
background-color: #27272a;
}
.neumorphic-light {
box-shadow: 8px 8px 16px #acacac, -8px -8px 16px #ffffff;
}
.dark\:neumorphic-dark {
box-shadow: 8px 8px 16px #1a1a1a, -8px -8px 16px #333333;
}
/* Neumorphic buttons */
.neumorphic-button-light {
box-shadow: 4px 4px 8px #bdbdbd, -4px -4px 8px #ffffff;
}
.neumorphic-button-light:hover {
box-shadow: 2px 2px 4px #bdbdbd, -2px -2px 4px #ffffff;
transform: translateY(1px);
}
.dark\:neumorphic-button-dark {
box-shadow: 4px 4px 8px #1a1a1a, -4px -4px 8px #333333;
}
.dark\:neumorphic-button-dark:hover {
box-shadow: 2px 2px 4px #1a1a1a, -2px -2px 4px #333333;
transform: translateY(1px);
}
/* Heatmap cells */
.neumorphic-cell-light {
width: 40px;
height: 40px;
min-width: 32px;
min-height: 32px;
max-width: 60px;
max-height: 60px; /* Constraints for responsiveness */
aspect-ratio: 1 / 1;
border-radius: 8px;
background-color: hsl(200, 70%, 50%); /* Blue - primary triadic color */
box-shadow: inset 3px 3px 6px #acacac, inset -3px -3px 6px #ffffff;
transition: all 0.2s ease-in-out;
}
@media (min-width: 640px) {
.neumorphic-cell-light {
width: 50px;
height: 50px;
}
}
@media (min-width: 768px) {
.neumorphic-cell-light {
width: 55px;
height: 55px;
}
}
@media (min-width: 1024px) {
.neumorphic-cell-light {
width: 60px;
height: 60px;
}
}
.dark\:neumorphic-cell-dark {
background-color: hsl(200, 70%, 40%); /* Darker blue */
box-shadow: inset 3px 3px 6px #1a1a1a, inset -3px -3px 6px #333333;
border: 1px solid rgba(255,255,255,0.05);
}
/* Intensity-based color variation for cells (applied via --intensity custom property) */
.neumorphic-cell-light[style*='--intensity'] {
background-color: hsl(calc(200 + var(--intensity, 0.5) * 40 - 20), calc(70% + var(--intensity, 0.5) * 10%), calc(50% - var(--intensity, 0.5) * 10%)); /* Hue shift towards green/yellow, saturation/lightness adjust */
}
.dark\:neumorphic-cell-dark[style*='--intensity'] {
background-color: hsl(calc(200 + var(--intensity, 0.5) * 40 - 20), calc(70% + var(--intensity, 0.5) * 10%), calc(40% + var(--intensity, 0.5) * 10%)); /* Darker base, shifts to lighter/more saturated with intensity */
}
/* Inner shadows for intensity legend */
.neumorphic-inner-light {
box-shadow: inset 2px 2px 4px #acacac, inset -2px -2px 4px #ffffff;
}
.dark\:neumorphic-inner-dark {
box-shadow: inset 2px 2px 4px #1a1a1a, inset -2px -2px 4px #333333;
}
/* Triadic Color Scheme: Blue (Primary), Red-Orange, Green/Yellow for Accent/Highlight */
/* Blue: hsl(200, 70%, 50%) -> Tailwind equivalent: blue-500, blue-300, blue-700 */
/* Red-Orange: hsl(20, 70%, 50%) - could be used for danger/alert, not directly used in this heatmap intensity but good for overall palette */
/* Green/Yellow: hsl(140, 70%, 50%) - subtle shift for higher intensity in light mode or as accent */
/* The heatmap uses a subtle hue shift within the blue family for intensity, blending towards a greener blue for 'high' */
/* The `bg-blue-300`, `bg-blue-500`, `bg-blue-700` in the legend illustrate intensity levels */
</style>
</div>
</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.
Composant Cartes thermiques
Un composant de carte thermique avec un design minimaliste, une mise en page réactive et une prise en charge du thème sombre à l’aide de Tailwind CSS. Aucun JavaScript n’est inclus. Utilise CSS pour le style en mode sombre.
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.