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.
HTML Code
<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>
Composants associés
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.
Composant de commerce électronique de la carte thermique
Un composant de carte thermique minimaliste en niveaux de gris pour le commerce électronique, doté d’un design complexe et interactif. Réactif et prend en charge le mode sombre.
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.