Heat Maps Component
A responsive heat map component designed with glassmorphism effects, featuring frosted glass-like translucent elements and support for dark theme styling, utilizing Tailwind CSS.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 backdrop-blur-lg rounded-xl shadow-lg p-6 md:w-1/2 w-full">
<h2 class="text-center text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Heat Maps Component</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
<img src="https://picsum.photos/300/200" alt="Heat map" class="object-cover w-full h-full rounded-lg">
</div>
<div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
<img src="https://picsum.photos/300/201" alt="Heat map" class="object-cover w-full h-full rounded-lg">
</div>
<div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
<img src="https://picsum.photos/300/202" alt="Heat map" class="object-cover w-full h-full rounded-lg">
</div>
<div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
<img src="https://picsum.photos/300/203" alt="Heat map" class="object-cover w-full h-full rounded-lg">
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
<p class="text-gray-800 dark:text-gray-200 font-medium">User 1</p>
</div>
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
<p class="text-gray-800 dark:text-gray-200 font-medium">User 2</p>
</div>
</div>
</div>
</div>
Related Components
Heat Maps Component
A responsive heat map component for social media with Skeuomorphism design, complementary colors, and dark mode support using Tailwind CSS.
Heat Maps Component
A responsive heat maps component styled for dark mode using Tailwind CSS, featuring random placeholder images and user avatars.
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.