Componenti Mappe di calore Mappe di calore Componente 42

Mappe di calore Componente 42

Un componente di mappa di calore reattivo progettato con lo stile Neumorphism utilizzando Tailwind CSS, che supporta la modalità oscura e presenta immagini e avatar casuali.

Anteprima

Codice HTML

<div class="flex flex-col items-center justify-center min-h-screen bg-gradient-to-r from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 px-4">
  <h2 class="text-2xl font-semibold mb-4 text-gray-700 dark:text-gray-300">Heat Map Component</h2>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4 w-full max-w-4xl">
    <!-- Sample Heat Map Item -->
    <div class="flex flex-col items-center justify-center p-4 rounded-lg shadow-lg bg-white dark:bg-gray-700 transition-all duration-300 ease-in-out hover:shadow-xl">
      <img class="w-24 h-24 rounded-full mb-2" src="https://picsum.photos/200/200?random=1" alt="Random Image" />
      <p class="text-lg font-medium text-gray-800 dark:text-gray-300">Heat Point 1</p>
      <p class="text-sm text-gray-500 dark:text-gray-400">Activity Level: High</p>
    </div>
    <div class="flex flex-col items-center justify-center p-4 rounded-lg shadow-lg bg-white dark:bg-gray-700 transition-all duration-300 ease-in-out hover:shadow-xl">
      <img class="w-24 h-24 rounded-full mb-2" src="https://picsum.photos/200/200?random=2" alt="Random Image" />
      <p class="text-lg font-medium text-gray-800 dark:text-gray-300">Heat Point 2</p>
      <p class="text-sm text-gray-500 dark:text-gray-400">Activity Level: Medium</p>
    </div>
    <div class="flex flex-col items-center justify-center p-4 rounded-lg shadow-lg bg-white dark:bg-gray-700 transition-all duration-300 ease-in-out hover:shadow-xl">
      <img class="w-24 h-24 rounded-full mb-2" src="https://picsum.photos/200/200?random=3" alt="Random Image" />
      <p class="text-lg font-medium text-gray-800 dark:text-gray-300">Heat Point 3</p>
      <p class="text-sm text-gray-500 dark:text-gray-400">Activity Level: Low</p>
    </div>
    <!-- More heat map items can be added here -->
  </div>
</div>

Componenti correlati

Componente Mappe di calore

Un componente di mappe termiche reattivo con stile per la modalità oscura utilizzando Tailwind CSS, con immagini segnaposto casuali e avatar utente.

Aperto

Componente Mappe di calore

Un componente 3D Heat Map con una combinazione di colori analoga, adatto per un portfolio. È reattivo e supporta la modalità oscura.

Aperto

Componente Mappe di calore

Un componente reattivo per le mappe di calore progettato con un'estetica retrò/vintage, che incorpora il supporto per i temi scuri. Presenta sezioni per un titolo, un sottotitolo e una mappa con aree evidenziate termicamente, con immagini casuali e avatar aggiuntivi per un look nostalgico.

Aperto