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.
HTML Code
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 max-w-md mx-auto">
<h2 class="text-2xl font-bold text-center text-pink-600 dark:text-pink-300">Heat Map</h2>
<div class="mt-4 grid grid-cols-3 gap-2">
<div class="bg-blue-300 dark:bg-blue-700 h-24 rounded-lg flex items-center justify-center">
<img src="https://picsum.photos/100/100" alt="Sample Image" class="rounded-full border-4 border-white">
</div>
<div class="bg-green-300 dark:bg-green-700 h-24 rounded-lg flex items-center justify-center">
<img src="https://picsum.photos/101/100" alt="Sample Image" class="rounded-full border-4 border-white">
</div>
<div class="bg-yellow-300 dark:bg-yellow-700 h-24 rounded-lg flex items-center justify-center">
<img src="https://picsum.photos/102/100" alt="Sample Image" class="rounded-full border-4 border-white">
</div>
<div class="bg-pink-300 dark:bg-pink-700 h-24 rounded-lg flex items-center justify-center">
<img src="https://picsum.photos/103/100" alt="Sample Image" class="rounded-full border-4 border-white">
</div>
<div class="bg-purple-300 dark:bg-purple-700 h-24 rounded-lg flex items-center justify-center">
<img src="https://picsum.photos/104/100" alt="Sample Image" class="rounded-full border-4 border-white">
</div>
<div class="bg-red-300 dark:bg-red-700 h-24 rounded-lg flex items-center justify-center">
<img src="https://picsum.photos/105/100" alt="Sample Image" class="rounded-full border-4 border-white">
</div>
</div>
<div class="mt-4 flex justify-between items-center">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-4 border-white">
<span class="ml-2 text-gray-700 dark:text-gray-300">User: John Doe</span>
</div>
<button class="bg-pink-500 dark:bg-pink-600 text-white font-semibold py-2 px-4 rounded">Action</button>
</div>
</div>Composants associés
Composant Cartes thermiques
Un composant de cartes thermiques conçu dans le style du glassmorphism, avec des tons de terre. La mise en page est simple, composée d’éléments de base destinés à une utilisation professionnelle/d’entreprise, et prend en charge le mode sombre.
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 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.