Search Components

Heat Maps

Graphical representation of data using color intensity

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.

Open Preview

                <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>

Heat Maps Component

A responsive heat maps component styled with Tailwind CSS, featuring microinteractions and dark theme support, using placeholder images and avatars.

Open Preview

                <div class="max-w-4xl mx-auto px-4 py-8">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Heat Maps Overview</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <!-- Heat Map Item -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
      <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/400/200?random=1" alt="Heat Map 1">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Population Density</h3>
        <p class="text-gray-600 dark:text-gray-400">Visual representation of population density across regions.</p>
      </div>
    </div>
    <!-- Heat Map Item -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
      <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/400/200?random=2" alt="Heat Map 2">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Traffic Patterns</h3>
        <p class="text-gray-600 dark:text-gray-400">Analyzing traffic flow across different times of the day.</p>
      </div>
    </div>
    <!-- Heat Map Item -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
      <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/400/200?random=3" alt="Heat Map 3">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Sales Heatmap</h3>
        <p class="text-gray-600 dark:text-gray-400">Distribution of sales revenue across various regions.</p>
      </div>
    </div>
    <!-- Heat Map Item -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
      <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/400/200?random=4" alt="Heat Map 4">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Engagement</h3>
        <p class="text-gray-600 dark:text-gray-400">Tracking user interaction levels on the website.</p>
      </div>
    </div>
  </div>
</div>

<style>
  @media (prefers-color-scheme: dark) {
    body {
      background-color: #1a202c;
    }
  }
</style>

Heat Maps Component 42

A responsive heat map component designed with Neumorphism style using Tailwind CSS, supporting dark mode and featuring random images and avatars.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gradient-to-r from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 px-4">
  <h2 class="text-2xl font-semibold mb-4 text-gray-700 dark:text-gray-300">Heat Map Component</h2>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4 w-full max-w-4xl">
    <!-- Sample Heat Map Item -->
    <div class="flex flex-col items-center justify-center p-4 rounded-lg shadow-lg bg-white dark:bg-gray-700 transition-all duration-300 ease-in-out hover:shadow-xl">
      <img class="w-24 h-24 rounded-full mb-2" src="https://picsum.photos/200/200?random=1" alt="Random Image" />
      <p class="text-lg font-medium text-gray-800 dark:text-gray-300">Heat Point 1</p>
      <p class="text-sm text-gray-500 dark:text-gray-400">Activity Level: High</p>
    </div>
    <div class="flex flex-col items-center justify-center p-4 rounded-lg shadow-lg bg-white dark:bg-gray-700 transition-all duration-300 ease-in-out hover:shadow-xl">
      <img class="w-24 h-24 rounded-full mb-2" src="https://picsum.photos/200/200?random=2" alt="Random Image" />
      <p class="text-lg font-medium text-gray-800 dark:text-gray-300">Heat Point 2</p>
      <p class="text-sm text-gray-500 dark:text-gray-400">Activity Level: Medium</p>
    </div>
    <div class="flex flex-col items-center justify-center p-4 rounded-lg shadow-lg bg-white dark:bg-gray-700 transition-all duration-300 ease-in-out hover:shadow-xl">
      <img class="w-24 h-24 rounded-full mb-2" src="https://picsum.photos/200/200?random=3" alt="Random Image" />
      <p class="text-lg font-medium text-gray-800 dark:text-gray-300">Heat Point 3</p>
      <p class="text-sm text-gray-500 dark:text-gray-400">Activity Level: Low</p>
    </div>
    <!-- More heat map items can be added here -->
  </div>
</div>

Heat Maps Component 18

A responsive heat map component designed in a Brutalism style with high contrast, featuring placeholder images and avatar support for dark mode.

Open Preview

                <div class="flex flex-col bg-gray-100 dark:bg-gray-800 p-6 rounded-lg">
    <h2 class="text-2xl font-bold text-black dark:text-white mb-4">Heat Maps Overview</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="relative bg-red-400 p-4 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/200?random=1" alt="Heat Map 1" class="absolute inset-0 w-full h-full object-cover opacity-50 rounded-lg">
            <div class="relative z-10 text-black dark:text-white">
                <h3 class="text-xl font-bold">Region A</h3>
                <p>High Activity</p>
            </div>
        </div>
        <div class="relative bg-yellow-400 p-4 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/200?random=2" alt="Heat Map 2" class="absolute inset-0 w-full h-full object-cover opacity-50 rounded-lg">
            <div class="relative z-10 text-black dark:text-white">
                <h3 class="text-xl font-bold">Region B</h3>
                <p>Moderate Activity</p>
            </div>
        </div>
        <div class="relative bg-green-400 p-4 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/200?random=3" alt="Heat Map 3" class="absolute inset-0 w-full h-full object-cover opacity-50 rounded-lg">
            <div class="relative z-10 text-black dark:text-white">
                <h3 class="text-xl font-bold">Region C</h3>
                <p>Low Activity</p>
            </div>
        </div>
        <div class="relative bg-blue-400 p-4 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/200?random=4" alt="Heat Map 4" class="absolute inset-0 w-full h-full object-cover opacity-50 rounded-lg">
            <div class="relative z-10 text-black dark:text-white">
                <h3 class="text-xl font-bold">Region D</h3>
                <p>Very Low Activity</p>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h2 class="text-xl font-bold text-black dark:text-white mb-2">User Avatars</h2>
        <div class="flex flex-wrap gap-4">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar 1">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar 2">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar 3">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar 4">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar 5">
        </div>
    </div>
</div>

Search Components

Categories

Heat Maps

Heat Maps Component

Heat Maps Component

Heat Maps Component 42

Heat Maps Component 18