Composants Cartes thermiques Composant Neumorphism Vibrant Heat Maps
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.
Aperçu

HTML Code

<!-- Heat Maps Component - Neumorphism, Vibrant, Responsive, Dark Mode, No JS -->

<div class="p-4 transition-colors duration-300 neumorphism-container">

  <!-- Component Title -->
  <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">Annual Contribution Summary</h3>

  <div class="flex overflow-x-auto pb-4">
    <!-- Month Labels (simplified) -->
    <div class="flex flex-col mr-2 text-sm text-gray-600 dark:text-gray-400">
        <span class="h-5 mb-1"></span> <!-- Spacing for alignment -->
        <span class="h-5 mb-1">Jan</span>
        <span class="h-5 mb-1">Feb</span>
        <span class="h-5 mb-1">Mar</span>
        <span class="h-5 mb-1">Apr</span>
        <span class="h-5 mb-1">May</span>
        <span class="h-5 mb-1">Jun</span>
        <span class="h-5 mb-1">Jul</span>
        <span class="h-5 mb-1">Aug</span>
        <span class="h-5 mb-1">Sep</span>
        <span class="h-5 mb-1">Oct</span>
        <span class="h-5 mb-1">Nov</span>
        <span class="h-5 mb-1">Dec</span>
      </div>


    <!-- Heatmap Grid - Simplified representation of columns (weeks/days) -->
    <div class="grid grid-flow-col grid-rows-12 gap-1">
      <!-- Column representing a week/period -->
      <div class="flex flex-col gap-1">
        <!-- Cells representing days -->
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
      </div>

       <!-- Repeat columns for more data points -->
      <div class="flex flex-col gap-1">
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover-inner cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
         <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
      </div>
        <!-- Add more columns for a fuller year representation -->
         <div class="flex flex-col gap-1">
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
      </div>

       <div class="flex flex-col gap-1">
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover-inner cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
         <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
      </div>
         <div class="flex flex-col gap-1">
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
      </div>

       <div class="flex flex-col gap-1">
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover-inner cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
         <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
      </div>
    </div>
  </div>

  <!-- Legend -->
   <div class="flex justify-end items-center text-sm mt-4 text-gray-600 dark:text-gray-400">
      Less
       <div class="w-4 h-4 rounded-sm neumorphism-cell level-0 ml-2"></div>
       <div class="w-4 h-4 rounded-sm neumorphism-cell level-1 ml-1"></div>
       <div class="w-4 h-4 rounded-sm neumorphism-cell level-2 ml-1"></div>
       <div class="w-4 h-4 rounded-sm neumorphism-cell level-3 ml-1"></div>
       <div class="w-4 h-4 rounded-sm neumorphism-cell level-4 ml-1 mr-2"></div>
      More
   </div>

</div>

<!-- Add custom CSS for Neumorphism and color levels -->
<!-- These styles are necessary to achieve the specific Neumorphism effect
     and vibrant color levels not available via standard Tailwind utilities alone. -->
<style>
/* Base background for Neumorphism */
/* Apply this to the body or the container containing the component for the full effect */
/* body {
  background-color: #e0e0e0;
} */

/* Neumorphism container style */
.neumorphism-container {
  background: #e0e0e0; /* Base light mode color */
  border-radius: 12px;
  padding-top: 1rem; /* pt-4 */
  padding-bottom: 1rem; /* pb-4 */
  padding-left: 1rem; /* pl-4 */
   padding-right: 1rem; /* pr-4 */
  /* Convex effect */
  box-shadow: 7px 7px 15px #bebebe,
             -7px -7px 15px #ffffff;
}

/* Dark mode Neumorphism container style */
.dark .neumorphism-container {
  background: #333333; /* Base dark mode color */
   box-shadow: 7px 7px 15px #222222,
              -7px -7px 15px #444444;
}


/* Neumorphism cell base style */
.neumorphism-cell {
  background: #e0e0e0; /* Match container background initially */
   box-shadow: 2px 2px 5px #bebebe,
              -2px -2px 5px #ffffff;
   transition: all 0.1s ease-in-out; /* Smooth transition for hover */
}

/* Dark mode Neumorphism cell base style */
.dark .neumorphism-cell {
   background: #333333; /* Match dark container background */
   box-shadow: 2px 2px 5px #222222,
              -2px -2px 5px #444444;
}


/* Vibrant Color Levels (Light Mode) */
.level-0 { background-color: #e0e0e0; } /* Base/none */
.level-1 { background-color: #a7f3d0; } /* Green 200 */
.level-2 { background-color: #34d399; } /* Green 500 */
.level-3 { background-color: #059669; } /* Green 700 */
.level-4 { background-color: #047857; } /* Green 800 - More vibrant */

/* Vibrant Color Levels (Dark Mode) */
.dark .level-0 { background-color: #333333; } /* Base/none */
.dark .level-1 { background-color: #064e3b; } /* Green 900 dark inverse */
.dark .level-2 { background-color: #065f46; } /* Green 800 dark inverse */
.dark .level-3 { background-color: #047857; } /* Green 700 dark inverse */
.dark .level-4 { background-color: #059669; } /* Green 600 dark inverse */


/* Hover effect: Simulate pressing in */
.neumorphism-cell.hover\:level-0-hover:hover {
  box-shadow: inset 2px 2px 5px #bebebe,
             inset -2px -2px 5px #ffffff;
}
.dark .neumorphism-cell.hover\:level-0-hover:hover {
   box-shadow: inset 2px 2px 5px #222222,
              inset -2px -2px 5px #444444;
}


.neumorphism-cell.hover\:level-1-hover:hover {
   box-shadow: inset 2px 2px 5px #86efac, /* Darker vibrant shadow */
              inset -2px -2px 5px #d1fae5; /* Lighter vibrant highlight */
}
.dark .neumorphism-cell.hover\:level-1-hover:hover {
    box-shadow: inset 2px 2px 5px #059669,
              inset -2px -2px 5px #0f766e;
}


.neumorphism-cell.hover\:level-2-hover:hover {
   box-shadow: inset 2px 2px 5px #10b981,
              inset -2px -2px 5px #6ee7b7;
}
.dark .neumorphism-cell.hover\:level-2-hover:hover {
   box-shadow: inset 2px 2px 5px #047857,
              inset -2px -2px 5px #1d403b;
}

.neumorphism-cell.hover\:level-3-hover:hover {
   box-shadow: inset 2px 2px 5px #047857,
              inset -2px -2px 5px #06d6a0;
}
.dark .neumorphism-cell.hover\:level-3-hover:hover {
   box-shadow: inset 2px 2px 5px #059669,
              inset -2px -2px 5px #022c22;
}

.neumorphism-cell.hover\:level-4-hover:hover {
   box-shadow: inset 2px 2px 5px #065f46,
              inset -2px -2px 5px #08e5a4;
}
.dark .neumorphism-cell.hover\:level-4-hover:hover {
   box-shadow: inset 2px 2px 5px #047857,
              inset -2px -2px 5px #011f17;
}

/* Note: Ensure parent container or body has a background color matching the neumorphism base */
/* For the preview, you might need to add a base background to the html or body */
/*
html, body {
  background-color: #e0e0e0; /* Light mode base *
  transition: background-color 0.3s ease;
}
.dark html, .dark body {
   background-color: #333333; /* Dark mode base *
}
*/

</style>
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.
Ouvrir
Composant Cartes thermiques

Un composant de cartes thermiques simple et réactif avec un style de conception 3D et une palette de couleurs complémentaires, conçu pour présenter des travaux ou des produits prenant en charge le thème sombre.
Ouvrir
Composant Cartes thermiques

Un composant de cartes thermiques réactif avec une esthétique rétro/vintage, conçu à des fins de blog/contenu, avec des éléments interactifs et la prise en charge du thème sombre.
Ouvrir