ヒートマップコンポーネント
レトロ/ビンテージの美学でデザインされたレスポンシブ ヒート マップ コンポーネントで、ダーク テーマのサポートが組み込まれています。タイトル、サブタイトル、ヒートハイライトされたエリアのマップがあり、ノスタルジックな外観のための追加のランダムな画像とアバターがあります。
HTMLコード
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-2xl mx-auto">
<h2 class="text-3xl font-bold text-center text-purple-800 dark:text-purple-300 mb-2">Heat Maps Data Visualization</h2>
<h4 class="text-lg text-center text-gray-600 dark:text-gray-400 mb-6">Exploring trends with a nostalgic vibe!</h4>
<div class="relative w-full h-64 mb-4 bg-gradient-to-r from-pink-300 via-purple-400 to-blue-500 rounded-lg overflow-hidden">
<img src="https://picsum.photos/600/400" alt="Heat Map" class="absolute inset-0 object-cover w-full h-full opacity-80">
<div class="absolute top-0 left-0 right-0 bottom-0 flex justify-center items-center">
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
<h3 class="text-lg font-semibold text-purple-800 dark:text-purple-300">Active Areas</h3>
<ul class="mt-2 space-y-2">
<li class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-300">User 1: 35%</span>
</li>
<li class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-300">User 2: 50%</span>
</li>
<li class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-300">User 3: 20%</span>
</li>
</ul>
</div>
</div>
</div>
<p class="text-center text-gray-600 dark:text-gray-400">Explore the data trends with a touch from the 80s and 90s!</p>
</div>関連コンポーネント
ヒートマップコンポーネント
Earth-Tone を特徴とする glassmorphism スタイルで設計されたヒートマップコンポーネント。レイアウトはシンプルで、ビジネス/企業での使用を目的とした基本的な要素で構成され、ダークモードをサポートしています。
ヒートマップコンポーネント
Glassmorphism エフェクトでデザインされたレスポンシブ ヒート マップ コンポーネントで、すりガラスのような半透明の要素と、Tailwind CSS を利用したダーク テーマのスタイリングのサポートが特徴です。