Componente Mappe di calore
Un componente minimalista per le mappe di calore che mostra un portfolio con funzionalità interattive, design reattivo e supporto per temi scuri utilizzando Tailwind CSS.
Codice HTML
<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>Componenti correlati
Componente Mappe di calore
Un componente reattivo per le mappe termiche in modalità scura per la visualizzazione dei dati su una dashboard, utilizzando una combinazione di colori triadica.
Mappe di calore Componente 18
Un componente per mappe di calore reattivo progettato in stile brutalismo con contrasto elevato, con immagini segnaposto e supporto avatar per la modalità oscura.
Neumorfismo Vibrante Heat Maps Componente
Un componente di mappe di calore reattivo con design a neumorfismo, che utilizza una combinazione di colori vivaci e una complessità moderata. Include il supporto per la modalità oscura e gli effetti al passaggio del mouse. Costruito con semplici classi HTML e Tailwind CSS, integrato con un piccolo blocco CSS per ombre di neumorfismo personalizzate e livelli di colore.