Composant Cartes thermiques
Un composant de cartes thermiques réactives conçu avec glassmorphism et une palette de couleurs analogue pour les interfaces de médias sociaux.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-800 dark:bg-gray-900 p-4">
<div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-lg border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-6 w-full max-w-md">
<h2 class="text-2xl font-semibold text-gray-900 dark:text-white text-center mb-4">Heat Maps Overview</h2>
<div class="grid grid-cols-2 gap-2">
<div class="p-4 bg-red-200 rounded-lg dark:bg-red-600 flex items-center justify-center">
<img src="https://picsum.photos/100/100?random=1" alt="Sample Image" class="rounded-full border-2 border-white dark:border-gray-900">
<p class="text-gray-800 dark:text-white ml-2">John Doe</p>
</div>
<div class="p-4 bg-green-200 rounded-lg dark:bg-green-600 flex items-center justify-center">
<img src="https://picsum.photos/100/100?random=2" alt="Sample Image" class="rounded-full border-2 border-white dark:border-gray-900">
<p class="text-gray-800 dark:text-white ml-2">Jane Smith</p>
</div>
<div class="p-4 bg-blue-200 rounded-lg dark:bg-blue-600 flex items-center justify-center">
<img src="https://picsum.photos/100/100?random=3" alt="Sample Image" class="rounded-full border-2 border-white dark:border-gray-900">
<p class="text-gray-800 dark:text-white ml-2">Alice Johnson</p>
</div>
<div class="p-4 bg-yellow-200 rounded-lg dark:bg-yellow-600 flex items-center justify-center">
<img src="https://picsum.photos/100/100?random=4" alt="Sample Image" class="rounded-full border-2 border-white dark:border-gray-900">
<p class="text-gray-800 dark:text-white ml-2">Bob Lee</p>
</div>
</div>
</div>
</div>Composants associé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.
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.
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.