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.
HTML Code
<div class="bg-gray-100 dark:bg-gray-900 p-4">
<h2 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">Activity Heatmap</h2>
<div class="grid grid-cols-7 gap-1">
</div>
<!-- Days of the week -->
<div class="col-span-1 text-center text-sm text-gray-600 dark:text-gray-400">Sun</div>
<div class="col-span-1 text-center text-sm text-gray-600 dark:text-gray-400">Mon</div>
<div class="col-span-1 text-center text-sm text-gray-600 dark:text-gray-400">Tue</div>
<div class="col-span-1 text-center text-sm text-gray-600 dark:text-gray-400">Wed</div>
<div class="col-span-1 text-center text-sm text-gray-600 dark:text-gray-400">Thu</div>
<div class="col-span-1 text-center text-sm text-gray-600 dark:text-gray-400">Fri</div>
<div class="col-span-1 text-center text-sm text-gray-600 dark:text-gray-400">Sat</div>
<!-- Heatmap cells (example: 4 weeks) -->
{[...Array(28)].map((_, i) => (
<div key={i} class="h-5 bg-gray-300 dark:bg-gray-700 rounded-sm"
style={{ opacity: Math.random() * 0.8 + 0.2 }}>
</div>
))}
</div>
</div>
Composants associés
Composant Cartes thermiques
Un composant de cartes thermiques conçu dans le style du glassmorphism, avec des tons de terre. La mise en page est simple, composée d’éléments de base destinés à une utilisation professionnelle/d’entreprise, et prend en charge le mode 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.
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.