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.
Codice HTML
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg">
<h2 class="text-3xl text-gray-900 dark:text-white font-extrabold mb-4">Heat Maps</h2>
<div class="grid grid-cols-3 gap-4">
<div class="relative bg-red-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
<img src="https://picsum.photos/200/200?random=1" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
<div class="relative z-10 text-white font-bold text-lg">20%</div>
</div>
<div class="relative bg-yellow-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
<img src="https://picsum.photos/200/200?random=2" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
<div class="relative z-10 text-black font-bold text-lg">50%</div>
</div>
<div class="relative bg-green-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
<img src="https://picsum.photos/200/200?random=3" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
<div class="relative z-10 text-white font-bold text-lg">75%</div>
</div>
<div class="relative bg-blue-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
<img src="https://picsum.photos/200/200?random=4" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
<div class="relative z-10 text-white font-bold text-lg">40%</div>
</div>
<div class="relative bg-purple-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
<img src="https://picsum.photos/200/200?random=5" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
<div class="relative z-10 text-white font-bold text-lg">90%</div>
</div>
<div class="relative bg-gray-600 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
<img src="https://picsum.photos/200/200?random=6" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
<div class="relative z-10 text-white font-bold text-lg">60%</div>
</div>
</div>
<div class="mt-6">
<h3 class="text-2xl text-gray-900 dark:text-white font-bold mb-2">User Avatars</h3>
<div class="flex space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-900 dark:border-white">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-900 dark:border-white">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-900 dark:border-white">
</div>
</div>
</div>
<div class="hidden dark:block bg-gray-900 h-32 text-center flex items-center justify-center text-white font-bold text-xl">Dark Mode Active</div>Componenti correlati
Componente Mappe di calore
Un semplice componente per mappe di calore reattivo progettato con un'estetica retrò/vintage utilizzando una combinazione di colori pastello, adatto per cruscotti. È dotato di supporto per il tema scuro con Tailwind CSS.
Componente Mappe di calore
Un componente heatmap con design minimalista, layout reattivo e supporto per temi scuri utilizzando Tailwind CSS. Non è incluso alcun JavaScript. Utilizza i CSS per lo stile della modalità scura.
Componente Mappe di calore
Un componente di mappe di calore reattivo con Tailwind CSS, con microinterazioni e supporto per temi scuri, utilizzando immagini segnaposto e avatar.