Composant Cartes thermiques
Un composant de cartes thermiques minimaliste présentant un portefeuille avec des fonctionnalités interactives, un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="max-w-4xl mx-auto p-5">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Portfolio Heat Maps</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<!-- Example Heat Map Item -->
<div class="bg-red-300 dark:bg-red-800 p-4 rounded-lg hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=1" alt="Project 1" class="rounded mb-2" />
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Project Title 1</h3>
<p class="text-gray-700 dark:text-gray-300">Description of project 1 goes here.</p>
</div>
<div class="bg-blue-300 dark:bg-blue-800 p-4 rounded-lg hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=2" alt="Project 2" class="rounded mb-2" />
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Project Title 2</h3>
<p class="text-gray-700 dark:text-gray-300">Description of project 2 goes here.</p>
</div>
<div class="bg-green-300 dark:bg-green-800 p-4 rounded-lg hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=3" alt="Project 3" class="rounded mb-2" />
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Project Title 3</h3>
<p class="text-gray-700 dark:text-gray-300">Description of project 3 goes here.</p>
</div>
<!-- Add more items as needed -->
</div>
</div>Composants associés
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.
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 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.