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.
HTML Code
<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>Composants associés
Luxury_Premium_Heatmap_Component
Un composant de carte thermique triadique élégant et sophistiqué conçu pour les sites Web d’actualités et de journalisme, mettant en valeur la popularité ou l’engagement des articles. Il présente une typographie raffinée, des dégradés subtils et une réactivité totale avec la prise en charge du 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.
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.