Heatmaps-Komponente
Eine Heatmaps-Komponente, die in einem brutalistischen Stil mit hohem Kontrast und ungewöhnlichen Layouts unter Verwendung von Tailwind CSS entworfen wurde. Es unterstützt reaktionsschnelle Effekte und ein dunkles Thema.
HTML-Code
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg">
<h2 class="text-3xl text-gray-900 dark:text-white font-extrabold mb-4">Heat Maps</h2>
<div class="grid grid-cols-3 gap-4">
<div class="relative bg-red-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
<img src="https://picsum.photos/200/200?random=1" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
<div class="relative z-10 text-white font-bold text-lg">20%</div>
</div>
<div class="relative bg-yellow-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
<img src="https://picsum.photos/200/200?random=2" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
<div class="relative z-10 text-black font-bold text-lg">50%</div>
</div>
<div class="relative bg-green-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
<img src="https://picsum.photos/200/200?random=3" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
<div class="relative z-10 text-white font-bold text-lg">75%</div>
</div>
<div class="relative bg-blue-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
<img src="https://picsum.photos/200/200?random=4" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
<div class="relative z-10 text-white font-bold text-lg">40%</div>
</div>
<div class="relative bg-purple-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
<img src="https://picsum.photos/200/200?random=5" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
<div class="relative z-10 text-white font-bold text-lg">90%</div>
</div>
<div class="relative bg-gray-600 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
<img src="https://picsum.photos/200/200?random=6" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
<div class="relative z-10 text-white font-bold text-lg">60%</div>
</div>
</div>
<div class="mt-6">
<h3 class="text-2xl text-gray-900 dark:text-white font-bold mb-2">User Avatars</h3>
<div class="flex space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-900 dark:border-white">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-900 dark:border-white">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-900 dark:border-white">
</div>
</div>
</div>
<div class="hidden dark:block bg-gray-900 h-32 text-center flex items-center justify-center text-white font-bold text-xl">Dark Mode Active</div>Verwandte Komponenten
Heatmaps-Komponente
Eine minimalistische und flache Design-Heatmap-Komponente mit gedämpften Farben, die sich für Gaming-Websites eignet. Verfügt über eine Rasteranzeige der Aktivitätsstufen, die auf allen Geräten reagiert und den Dunkelmodus unterstützt.
Neumorphe Heatmap-Komponente
Eine reaktionsschnelle, neumorphe Heatmap-Komponente mit einem triadischen Farbschema, die für Geschäfts- und Unternehmenswebsites entwickelt wurde. Verfügt über Unterstützung für weiche Schatten und den Dunkelmodus, wodurch die Datenintensität visuell angezeigt wird.
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.