Heatmaps-Komponente
Eine reaktionsschnelle Heatmaps-Komponente mit Unterstützung für dunkle Themen, die mit Tailwind CSS erstellt wurde. Es verfügt über ein einfaches Layout mit minimalen Elementen, das sich für einen Blog oder den Konsum von Inhalten eignet.
HTML-Code
<div class="dark:bg-gray-900 dark:text-gray-200 min-h-screen p-4">
<div class="container mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-100">Heat Map: Content Engagement</h2>
<p class="text-gray-600 dark:text-gray-400 mb-6">Visualizing user engagement across different content pieces.</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Heat Map Item 1 -->
<div class="bg-blue-100 dark:bg-blue-900 p-4 rounded-lg shadow-sm">
<h3 class="font-semibold text-blue-800 dark:text-blue-200 mb-2">Article: Dark Mode Benefits</h3>
<div class="grid grid-rows-3 grid-flow-col gap-1">
<div class="bg-blue-300 dark:bg-blue-700 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-blue-900 dark:text-blue-100">85%</div>
<div class="bg-blue-400 dark:bg-blue-600 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-blue-900 dark:text-blue-100">92%</div>
<div class="bg-blue-500 dark:bg-blue-500 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-blue-900 dark:text-blue-100">78%</div>
<div class="bg-blue-300 dark:bg-blue-700 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-blue-900 dark:text-blue-100">65%</div>
<div class="bg-blue-400 dark:bg-blue-600 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-blue-900 dark:text-blue-100">70%</div>
</div>
<p class="text-sm text-blue-700 dark:text-blue-300 mt-2">Engagement: High</p>
</div>
<!-- Heat Map Item 2 -->
<div class="bg-green-100 dark:bg-green-900 p-4 rounded-lg shadow-sm">
<h3 class="font-semibold text-green-800 dark:text-green-200 mb-2">Guide: Tailwind CSS Basics</h3>
<div class="grid grid-rows-3 grid-flow-col gap-1">
<div class="bg-green-300 dark:bg-green-700 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-green-900 dark:text-green-100">70%</div>
<div class="bg-green-400 dark:bg-green-600 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-green-900 dark:text-green-100">80%</div>
<div class="bg-green-500 dark:bg-green-500 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-green-900 dark:text-green-100">75%</div>
<div class="bg-green-300 dark:bg-green-700 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-green-900 dark:text-green-100">55%</div>
<div class="bg-green-400 dark:bg-green-600 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-green-900 dark:text-green-100">60%</div>
</div>
<p class="text-sm text-green-700 dark:text-green-300 mt-2">Engagement: Medium</p>
</div>
<!-- Heat Map Item 3 -->
<div class="bg-red-100 dark:bg-red-900 p-4 rounded-lg shadow-sm">
<h3 class="font-semibold text-red-800 dark:text-red-200 mb-2">Post: Web Design Trends</h3>
<div class="grid grid-rows-3 grid-flow-col gap-1">
<div class="bg-red-300 dark:bg-red-700 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-red-900 dark:text-red-100">40%</div>
<div class="bg-red-400 dark:bg-red-600 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-red-900 dark:text-red-100">50%</div>
<div class="bg-red-500 dark:bg-red-500 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-red-900 dark:text-red-100">35%</div>
<div class="bg-red-300 dark:bg-red-700 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-red-900 dark:text-red-100">25%</div>
<div class="bg-red-400 dark:bg-red-600 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-red-900 dark:text-red-100">30%</div>
</div>
<p class="text-sm text-red-700 dark:text-red-300 mt-2">Engagement: Low</p>
</div>
</div>
</div>
</div>Verwandte Komponenten
Heatmaps-Komponente
Heatmaps-Komponente mit responsiven Effekten und Unterstützung für dunkle Themen.
Heatmaps-Komponente 42
Eine reaktionsschnelle Heatmap-Komponente, die im Neumorphism-Stil unter Verwendung von Tailwind CSS entworfen wurde, den Dunkelmodus unterstützt und zufällige Bilder und Avatare enthält.
Heatmaps-Komponente
Eine von Entwicklern inspirierte Monospace-Heatmap-Komponente mit Erdtönen, die für Beratung/Dienstleistungen entwickelt wurde. Verfügt über ein gitterartiges Display, das Heatmap-Daten für verschiedene Tage simuliert, auf allen Geräten reaktionsfähig ist und den Dunkelmodus unterstützt.