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.
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
Heatmaps-Komponente
Eine Heatmaps-Komponente für den Konsum von Blogs/Inhalten mit einem responsiven Design mit Unterstützung für den Dunkelmodus. Nutzt Graustufen-Farbschema und mittlere Komplexität mit interaktiven Funktionen. Kein JavaScript, reines HTML mit Tailwind CSS.
Heatmaps-Komponente
Eine einfache, reaktionsschnelle Heatmaps-Komponente mit einem 3D-Designstil und einem komplementären Farbschema, das für die Präsentation von Arbeiten oder Produkten mit Unterstützung dunkler Themen entwickelt wurde.
Heatmaps-Komponente
Eine reaktionsschnelle 3D-Heatmap-Komponente mit Komplementärfarben, die für den Konsum von Blogs und Inhalten geeignet ist und den Dunkelmodus unterstützt.