CCHub Logo CCHub Tailwind Collection
コンポーネント ヒートマップ ヒート・マップ・コンポーネント 42

ヒート・マップ・コンポーネント 42

Tailwind CSS を使用して Neumorphism スタイルで設計されたレスポンシブ ヒート マップ コンポーネントで、ダーク モードをサポートし、ランダムな画像とアバターを備えています。

プレビュー

HTMLコード 

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

関連コンポーネント

Neumorphism Vibrant Heat Maps コンポーネント

Neumorphismデザインのレスポンシブヒートマップコンポーネントで、鮮やかな配色と適度な複雑さを使用しています。ダークモードのサポートとホバー効果が含まれています。プレーンな HTML と Tailwind CSS クラスで構築され、カスタムの Neumorphism シャドウとカラーレベル用の小さな CSS ブロックが追加されています。

開ける

ヒートマップコンポーネント

ブログ/コンテンツ消費用のヒートマップコンポーネントで、ダークモードをサポートするレスポンシブデザインが特徴です。グレースケールの配色と中程度の複雑さをインタラクティブ機能で利用します。JavaScriptは使用せず、Tailwind CSSを使用した純粋なHTML。

開ける

ヒートマップコンポーネント

レトロ/ビンテージの美学を備えたレスポンシブなヒートマップコンポーネントで、ブログ/コンテンツ用に設計されており、インタラクティブな要素とダークテーマのサポートを特徴としています。

開ける