CCHub Logo CCHub Tailwind Collection
Komponenten Heatmaps Heatmaps-Komponente

Heatmaps-Komponente

Eine reaktionsschnelle Heatmaps-Komponente, die mit Tailwind CSS gestaltet wurde, mit Mikrointeraktionen und Unterstützung für dunkle Themen unter Verwendung von Platzhalterbildern und Avataren.

Vorschau

HTML-Code 

<div class="max-w-4xl mx-auto px-4 py-8">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Heat Maps Overview</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <!-- Heat Map Item -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
      <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/400/200?random=1" alt="Heat Map 1">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Population Density</h3>
        <p class="text-gray-600 dark:text-gray-400">Visual representation of population density across regions.</p>
      </div>
    </div>
    <!-- Heat Map Item -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
      <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/400/200?random=2" alt="Heat Map 2">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Traffic Patterns</h3>
        <p class="text-gray-600 dark:text-gray-400">Analyzing traffic flow across different times of the day.</p>
      </div>
    </div>
    <!-- Heat Map Item -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
      <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/400/200?random=3" alt="Heat Map 3">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Sales Heatmap</h3>
        <p class="text-gray-600 dark:text-gray-400">Distribution of sales revenue across various regions.</p>
      </div>
    </div>
    <!-- Heat Map Item -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
      <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/400/200?random=4" alt="Heat Map 4">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Engagement</h3>
        <p class="text-gray-600 dark:text-gray-400">Tracking user interaction levels on the website.</p>
      </div>
    </div>
  </div>
</div>

<style>
  @media (prefers-color-scheme: dark) {
    body {
      background-color: #1a202c;
    }
  }
</style>

Verwandte Komponenten

Heatmaps-Komponente

Eine minimalistische Heatmaps-Komponente, die ein Portfolio mit interaktiven Funktionen, responsivem Design und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS präsentiert.

Offen

Heatmaps-Komponente

Eine reaktionsschnelle Heatmaps-Komponente im Dunkelmodus für die Datenvisualisierung auf einem Dashboard unter Verwendung eines triadischen Farbschemas.

Offen

Heatmaps-Komponente

Eine reaktionsschnelle Heatmaps-Komponente, die mit einer Retro-/Vintage-Ästhetik gestaltet wurde und Unterstützung für dunkle Themen bietet. Es enthält Abschnitte für einen Titel, einen Untertitel und eine Karte mit thermisch hervorgehobenen Bereichen sowie zusätzlichen zufälligen Bildern und Avataren für einen nostalgischen Look.

Offen