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 cartes thermiques réactif avec prise en charge du thème sombre, construit avec Tailwind CSS. Il présente une mise en page simple avec un minimum d’éléments, adaptée à un blog ou à la consommation de contenu.
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 réactif avec un style Glassmorphism, une palette de couleurs analogue et une complexité modérée pour un portfolio, avec prise en charge du thème sombre.