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.
HTML Code
<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>Composants associés
Composant Cartes thermiques
Un composant de carte thermique réactif pour les médias sociaux avec un design Skeuomorphism, des couleurs complémentaires et la prise en charge du mode sombre à l’aide de Tailwind CSS.
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.
Composant Cartes thermiques
Composant réactif de cartes thermiques en mode sombre pour la visualisation des données sur un tableau de bord, à l’aide d’un jeu de couleurs triadique.