Cartes thermiques

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 l’aperçu

                <div class="bg-gray-900 text-white p-6 rounded-lg shadow-lg dark:bg-gray-800">
    <h2 class="text-2xl font-bold mb-4 text-center">Portfolio Heat Maps</h2>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="bg-blue-500 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
            <img src="https://picsum.photos/200?random=1" alt="Project 1" class="w-full h-40 object-cover" />
            <div class="p-4">
                <h3 class="font-semibold text-lg">Project Title 1</h3>
                <p class="text-sm text-gray-200">Short description of the project.</p>
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2" />
                    <span class="text-gray-300">Designer Name</span>
                </div>
            </div>
        </div>
        <div class="bg-red-500 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
            <img src="https://picsum.photos/200?random=2" alt="Project 2" class="w-full h-40 object-cover" />
            <div class="p-4">
                <h3 class="font-semibold text-lg">Project Title 2</h3>
                <p class="text-sm text-gray-200">Short description of the project.</p>
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2" />
                    <span class="text-gray-300">Designer Name</span>
                </div>
            </div>
        </div>
        <div class="bg-green-500 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
            <img src="https://picsum.photos/200?random=3" alt="Project 3" class="w-full h-40 object-cover" />
            <div class="p-4">
                <h3 class="font-semibold text-lg">Project Title 3</h3>
                <p class="text-sm text-gray-200">Short description of the project.</p>
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2" />
                    <span class="text-gray-300">Designer Name</span>
                </div>
            </div>
        </div>
        <div class="bg-yellow-500 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
            <img src="https://picsum.photos/200?random=4" alt="Project 4" class="w-full h-40 object-cover" />
            <div class="p-4">
                <h3 class="font-semibold text-lg">Project Title 4</h3>
                <p class="text-sm text-gray-200">Short description of the project.</p>
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2" />
                    <span class="text-gray-300">Designer Name</span>
                </div>
            </div>
        </div>
    </div>
</div>

Composant Cartes thermiques

Un composant de cartes thermiques minimaliste présentant un portefeuille avec des fonctionnalités interactives, un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="max-w-4xl mx-auto p-5">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Portfolio Heat Maps</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <!-- Example Heat Map Item -->
        <div class="bg-red-300 dark:bg-red-800 p-4 rounded-lg hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=1" alt="Project 1" class="rounded mb-2" />
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Project Title 1</h3>
            <p class="text-gray-700 dark:text-gray-300">Description of project 1 goes here.</p>
        </div>
        <div class="bg-blue-300 dark:bg-blue-800 p-4 rounded-lg hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=2" alt="Project 2" class="rounded mb-2" />
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Project Title 2</h3>
            <p class="text-gray-700 dark:text-gray-300">Description of project 2 goes here.</p>
        </div>
        <div class="bg-green-300 dark:bg-green-800 p-4 rounded-lg hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=3" alt="Project 3" class="rounded mb-2" />
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Project Title 3</h3>
            <p class="text-gray-700 dark:text-gray-300">Description of project 3 goes here.</p>
        </div>
        <!-- Add more items as needed -->
    </div>
</div>

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.

Ouvrir l’aperçu

                <div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg">
    <h2 class="text-2xl font-bold mb-4 text-brown-800 dark:text-brown-200">Project Heat Maps</h2>
    <p class="mb-6 text-gray-700 dark:text-gray-300">Showcasing data visualizations through temperature maps in a bold and raw design style.</p>
    <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
        <div class="bg-brown-200 dark:bg-brown-700 rounded-lg shadow-md p-4">
            <img src="https://picsum.photos/400/200?random=1" alt="Heat Map 1" class="rounded-lg mb-2">
            <h3 class="font-bold text-lg text-brown-800 dark:text-brown-200">Heat Map 1</h3>
            <p class="text-brown-600 dark:text-brown-300">Description of heat map 1, highlighting interesting data points.</p>
        </div>
        <div class="bg-brown-200 dark:bg-brown-700 rounded-lg shadow-md p-4">
            <img src="https://picsum.photos/400/200?random=2" alt="Heat Map 2" class="rounded-lg mb-2">
            <h3 class="font-bold text-lg text-brown-800 dark:text-brown-200">Heat Map 2</h3>
            <p class="text-brown-600 dark:text-brown-300">Description of heat map 2, showcasing a different aspect of the data.</p>
        </div>
        <div class="bg-brown-200 dark:bg-brown-700 rounded-lg shadow-md p-4">
            <img src="https://picsum.photos/400/200?random=3" alt="Heat Map 3" class="rounded-lg mb-2">
            <h3 class="font-bold text-lg text-brown-800 dark:text-brown-200">Heat Map 3</h3>
            <p class="text-brown-600 dark:text-brown-300">Description of heat map 3, emphasizing key trends.</p>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="font-bold text-xl text-brown-800 dark:text-brown-200">Team</h3>
        <div class="flex space-x-4 mt-2">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar 1" class="w-12 h-12 rounded-full border-2 border-brown-800 dark:border-brown-200">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar 2" class="w-12 h-12 rounded-full border-2 border-brown-800 dark:border-brown-200">
            <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="Avatar 3" class="w-12 h-12 rounded-full border-2 border-brown-800 dark:border-brown-200">
        </div>
    </div>
</div>

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.

Ouvrir l’aperçu

                <!-- 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>

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.

Ouvrir l’aperçu

                <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>

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.

Ouvrir l’aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 backdrop-blur-lg rounded-xl shadow-lg p-6 md:w-1/2 w-full">
        <h2 class="text-center text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Heat Maps Component</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
                <img src="https://picsum.photos/300/200" alt="Heat map" class="object-cover w-full h-full rounded-lg">
            </div>
            <div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
                <img src="https://picsum.photos/300/201" alt="Heat map" class="object-cover w-full h-full rounded-lg">
            </div>
            <div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
                <img src="https://picsum.photos/300/202" alt="Heat map" class="object-cover w-full h-full rounded-lg">
            </div>
            <div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
                <img src="https://picsum.photos/300/203" alt="Heat map" class="object-cover w-full h-full rounded-lg">
            </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
            <div class="flex items-center space-x-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
                <p class="text-gray-800 dark:text-gray-200 font-medium">User 1</p>
            </div>
            <div class="flex items-center space-x-2">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
                <p class="text-gray-800 dark:text-gray-200 font-medium">User 2</p>
            </div>
        </div>
    </div>
</div>

Composant Cartes thermiques

Composant Heat Maps avec effets réactifs et prise en charge du thème sombre.

Ouvrir l’aperçu

                <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>

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.

Ouvrir l’aperçu

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-2xl mx-auto">
    <h2 class="text-3xl font-bold text-center text-purple-800 dark:text-purple-300 mb-2">Heat Maps Data Visualization</h2>
    <h4 class="text-lg text-center text-gray-600 dark:text-gray-400 mb-6">Exploring trends with a nostalgic vibe!</h4>
    <div class="relative w-full h-64 mb-4 bg-gradient-to-r from-pink-300 via-purple-400 to-blue-500 rounded-lg overflow-hidden">
        <img src="https://picsum.photos/600/400" alt="Heat Map" class="absolute inset-0 object-cover w-full h-full opacity-80">
        <div class="absolute top-0 left-0 right-0 bottom-0 flex justify-center items-center">
            <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
                <h3 class="text-lg font-semibold text-purple-800 dark:text-purple-300">Active Areas</h3>
                <ul class="mt-2 space-y-2">
                    <li class="flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-gray-800 dark:text-gray-300">User 1: 35%</span>
                    </li>
                    <li class="flex items-center">
                        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-gray-800 dark:text-gray-300">User 2: 50%</span>
                    </li>
                    <li class="flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-gray-800 dark:text-gray-300">User 3: 20%</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <p class="text-center text-gray-600 dark:text-gray-400">Explore the data trends with a touch from the 80s and 90s!</p>
</div>

Composant Cartes thermiques

Un composant de cartes thermiques réactif conçu pour le mode sombre à l’aide de Tailwind CSS, avec des images de remplacement aléatoires et des avatars d’utilisateurs.

Ouvrir l’aperçu

                <div class="bg-gray-900 text-white p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold mb-4">Heat Maps</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        <div class="bg-gray-800 rounded-lg p-4 transition-transform hover:scale-105">
            <img class="rounded-md" src="https://picsum.photos/200?random=1" alt="Heat Map 1">
            <p class="mt-2">Heat Map 1</p>
            <p class="text-sm text-gray-400">Description of heat map 1.</p>
        </div>
        <div class="bg-gray-800 rounded-lg p-4 transition-transform hover:scale-105">
            <img class="rounded-md" src="https://picsum.photos/200?random=2" alt="Heat Map 2">
            <p class="mt-2">Heat Map 2</p>
            <p class="text-sm text-gray-400">Description of heat map 2.</p>
        </div>
        <div class="bg-gray-800 rounded-lg p-4 transition-transform hover:scale-105">
            <img class="rounded-md" src="https://picsum.photos/200?random=3" alt="Heat Map 3">
            <p class="mt-2">Heat Map 3</p>
            <p class="text-sm text-gray-400">Description of heat map 3.</p>
        </div>
        <div class="bg-gray-800 rounded-lg p-4 transition-transform hover:scale-105">
            <img class="rounded-md" src="https://picsum.photos/200?random=4" alt="Heat Map 4">
            <p class="mt-2">Heat Map 4</p>
            <p class="text-sm text-gray-400">Description of heat map 4.</p>
        </div>
    </div>
    <h3 class="mt-8 text-xl font-semibold">User Insights</h3>
    <div class="mt-4 flex flex-wrap gap-4">
        <div class="bg-gray-800 rounded-lg p-4 flex items-center">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1">
            <div class="ml-3">
                <p class="font-medium">User 1</p>
                <p class="text-sm text-gray-400">Active in heat map 1.</p>
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg p-4 flex items-center">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2">
            <div class="ml-3">
                <p class="font-medium">User 2</p>
                <p class="text-sm text-gray-400">Active in heat map 2.</p>
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg p-4 flex items-center">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3">
            <div class="ml-3">
                <p class="font-medium">User 3</p>
                <p class="text-sm text-gray-400">Active in heat map 3.</p>
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg p-4 flex items-center">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User 4">
            <div class="ml-3">
                <p class="font-medium">User 4</p>
                <p class="text-sm text-gray-400">Active in heat map 4.</p>
            </div>
        </div>
    </div>
</div>

Composant Cartes thermiques

Un composant de cartes thermiques conçu avec un style brutaliste avec un contraste élevé et des mises en page inhabituelles utilisant Tailwind CSS. Il prend en charge les effets réactifs et un thème sombre.

Ouvrir l’aperçu

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg">
    <h2 class="text-3xl text-gray-900 dark:text-white font-extrabold mb-4">Heat Maps</h2>
    <div class="grid grid-cols-3 gap-4">
        <div class="relative bg-red-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
            <img src="https://picsum.photos/200/200?random=1" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
            <div class="relative z-10 text-white font-bold text-lg">20%</div>
        </div>
        <div class="relative bg-yellow-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
            <img src="https://picsum.photos/200/200?random=2" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
            <div class="relative z-10 text-black font-bold text-lg">50%</div>
        </div>
        <div class="relative bg-green-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
            <img src="https://picsum.photos/200/200?random=3" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
            <div class="relative z-10 text-white font-bold text-lg">75%</div>
        </div>
        <div class="relative bg-blue-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
            <img src="https://picsum.photos/200/200?random=4" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
            <div class="relative z-10 text-white font-bold text-lg">40%</div>
        </div>
        <div class="relative bg-purple-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
            <img src="https://picsum.photos/200/200?random=5" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
            <div class="relative z-10 text-white font-bold text-lg">90%</div>
        </div>
        <div class="relative bg-gray-600 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
            <img src="https://picsum.photos/200/200?random=6" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
            <div class="relative z-10 text-white font-bold text-lg">60%</div>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-2xl text-gray-900 dark:text-white font-bold mb-2">User Avatars</h3>
        <div class="flex space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-900 dark:border-white">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-900 dark:border-white">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-900 dark:border-white">
        </div>
    </div>
</div>
<div class="hidden dark:block bg-gray-900 h-32 text-center flex items-center justify-center text-white font-bold text-xl">Dark Mode Active</div>

Catégories