Heat Maps Component
A Heat Maps Component designed with a brutalist style featuring high contrast and unusual layouts using Tailwind CSS. It supports responsive effects and a dark theme.
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>Related Components
Heat Maps Component
A responsive Heat Maps Component with dark theme support, built with Tailwind CSS. It features a simple layout with minimal elements, suitable for a blog or content consumption.
Luxury_Premium_Heatmap_Component
An elegant and sophisticated triadic-colored heatmap component designed for news and journalism websites, showcasing article popularity or engagement. It features refined typography, subtle gradients, and full responsiveness with dark mode support.
Neumorphism Vibrant Heat Maps Component
A responsive Heat Maps Component with Neumorphism design, using a vibrant color scheme and moderate complexity. Includes dark mode support and hover effects. Built with plain HTML and Tailwind CSS classes, supplemented with a small CSS block for custom Neumorphism shadows and color levels.