Componente Mappe di calore
Un semplice componente di mappe termiche reattive con uno stile di progettazione 3D e una combinazione di colori complementari, progettato per mostrare lavori o prodotti con supporto per temi scuri.
Codice HTML
<div class="bg-gray-900 text-white p-6 rounded-lg shadow-lg dark:bg-gray-800">
<h2 class="text-2xl font-bold mb-4 text-center">Portfolio Heat Maps</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="bg-blue-500 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
<img src="https://picsum.photos/200?random=1" alt="Project 1" class="w-full h-40 object-cover" />
<div class="p-4">
<h3 class="font-semibold text-lg">Project Title 1</h3>
<p class="text-sm text-gray-200">Short description of the project.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2" />
<span class="text-gray-300">Designer Name</span>
</div>
</div>
</div>
<div class="bg-red-500 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
<img src="https://picsum.photos/200?random=2" alt="Project 2" class="w-full h-40 object-cover" />
<div class="p-4">
<h3 class="font-semibold text-lg">Project Title 2</h3>
<p class="text-sm text-gray-200">Short description of the project.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2" />
<span class="text-gray-300">Designer Name</span>
</div>
</div>
</div>
<div class="bg-green-500 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
<img src="https://picsum.photos/200?random=3" alt="Project 3" class="w-full h-40 object-cover" />
<div class="p-4">
<h3 class="font-semibold text-lg">Project Title 3</h3>
<p class="text-sm text-gray-200">Short description of the project.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2" />
<span class="text-gray-300">Designer Name</span>
</div>
</div>
</div>
<div class="bg-yellow-500 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
<img src="https://picsum.photos/200?random=4" alt="Project 4" class="w-full h-40 object-cover" />
<div class="p-4">
<h3 class="font-semibold text-lg">Project Title 4</h3>
<p class="text-sm text-gray-200">Short description of the project.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2" />
<span class="text-gray-300">Designer Name</span>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente e-commerce Heat Map
Un componente minimalista della mappa di calore in scala di grigi per l'e-commerce, caratterizzato da un design complesso e interattivo. Reattivo e supporta la modalità oscura.
Componente Mappe di calore
Un componente reattivo per le mappe di calore con supporto per il tema scuro, costruito con Tailwind CSS. Presenta un layout semplice con elementi minimi, adatto per un blog o per il consumo di contenuti.
Componente Mappe di calore
Un componente Heat Maps progettato con uno stile brutalista con contrasto elevato e layout insoliti utilizzando Tailwind CSS. Supporta effetti reattivi e un tema scuro.