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
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.
Heatmaps-Komponente
Eine reaktionsschnelle Heatmap-Komponente für soziale Medien mit Skeuomorphismus-Design, Komplementärfarben und Unterstützung für den Dunkelmodus mit Tailwind CSS.
Heatmaps-Komponente
Eine reaktionsschnelle Heatmaps-Komponente mit Retro-/Vintage-Ästhetik, die für Blog-/Content-Zwecke entwickelt wurde, mit interaktiven Elementen und Unterstützung für dunkle Themen.