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 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
Un composant de cartes thermiques réactives conçu avec glassmorphism et une palette de couleurs analogue pour les interfaces de médias sociaux.
Composant Cartes thermiques
Un composant de carte thermique ludique et amusant pour les sites Web d’actualités et de journalisme, avec un design lumineux et joyeux avec des éléments arrondis et une esthétique conviviale, en utilisant une palette de couleurs bleues d’entreprise. Comprend la réactivité et la prise en charge du mode sombre.