CCHub Logo CCHub Tailwind Collection
Komponenten Heatmaps Heatmaps-Komponente

Heatmaps-Komponente

Eine Heatmap-Komponente mit minimalistischem Design, responsivem Layout und Unterstützung für dunkle Themen mit Tailwind CSS. Es ist kein JavaScript enthalten. Verwendet CSS für das Styling im Dunkelmodus.

Vorschau

HTML-Code 

<div class="bg-gray-100 dark:bg-gray-900 p-4">
  <h2 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">Activity Heatmap</h2>
  <div class="grid grid-cols-7 gap-1">
    </div>
    <!-- Days of the week -->
    <div class="col-span-1 text-center text-sm text-gray-600 dark:text-gray-400">Sun</div>
    <div class="col-span-1 text-center text-sm text-gray-600 dark:text-gray-400">Mon</div>
    <div class="col-span-1 text-center text-sm text-gray-600 dark:text-gray-400">Tue</div>
    <div class="col-span-1 text-center text-sm text-gray-600 dark:text-gray-400">Wed</div>
    <div class="col-span-1 text-center text-sm text-gray-600 dark:text-gray-400">Thu</div>
    <div class="col-span-1 text-center text-sm text-gray-600 dark:text-gray-400">Fri</div>
    <div class="col-span-1 text-center text-sm text-gray-600 dark:text-gray-400">Sat</div>

    <!-- Heatmap cells (example: 4 weeks) -->
    {[...Array(28)].map((_, i) => (
      <div key={i} class="h-5 bg-gray-300 dark:bg-gray-700 rounded-sm"
           style={{ opacity: Math.random() * 0.8 + 0.2 }}>
      </div>
    ))}
  </div>
</div>

Verwandte Komponenten

Neumorphism Vibrant Heatmaps-Komponente

Eine reaktionsschnelle Heatmaps-Komponente mit Neumorphism-Design, die ein lebendiges Farbschema und moderate Komplexität verwendet. Enthält Unterstützung für den Dunkelmodus und Hover-Effekte. Erstellt mit einfachen HTML- und Tailwind-CSS-Klassen, ergänzt durch einen kleinen CSS-Block für benutzerdefinierte Neumorphism-Schatten und Farbstufen.

Offen

Heatmaps-Komponente 18

Eine reaktionsschnelle Heatmap-Komponente, die im Brutalismus-Stil mit hohem Kontrast gestaltet wurde, mit Platzhalterbildern und Avatar-Unterstützung für den Dunkelmodus.

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