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

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

ミニマリストデザイン、レスポンシブレイアウト、Tailwind CSSを使用したダークテーマのサポートを備えたヒートマップコンポーネント。JavaScriptは含まれていません。ダークモードのスタイル設定にCSSを使用します。

プレビュー

HTMLコード 

<div class="bg-gray-100 dark:bg-gray-900 p-4">
  <h2 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">Activity Heatmap</h2>
  <div class="grid grid-cols-7 gap-1">
    </div>
    <!-- Days of the week -->
    <div class="col-span-1 text-center text-sm text-gray-600 dark:text-gray-400">Sun</div>
    <div class="col-span-1 text-center text-sm text-gray-600 dark:text-gray-400">Mon</div>
    <div class="col-span-1 text-center text-sm text-gray-600 dark:text-gray-400">Tue</div>
    <div class="col-span-1 text-center text-sm text-gray-600 dark:text-gray-400">Wed</div>
    <div class="col-span-1 text-center text-sm text-gray-600 dark:text-gray-400">Thu</div>
    <div class="col-span-1 text-center text-sm text-gray-600 dark:text-gray-400">Fri</div>
    <div class="col-span-1 text-center text-sm text-gray-600 dark:text-gray-400">Sat</div>

    <!-- Heatmap cells (example: 4 weeks) -->
    {[...Array(28)].map((_, i) => (
      <div key={i} class="h-5 bg-gray-300 dark:bg-gray-700 rounded-sm"
           style={{ opacity: Math.random() * 0.8 + 0.2 }}>
      </div>
    ))}
  </div>
</div>

関連コンポーネント

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

Skeuomorphism デザイン、補色、Tailwind CSS を使用したダーク モードのサポートを備えたソーシャル メディア用のレスポンシブ ヒート マップ コンポーネント。

開ける

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

Tailwind CSS を使用してダークモード用にスタイル設定されたレスポンシブ ヒート マップ コンポーネントで、ランダムなプレースホルダー画像とユーザー アバターが特徴です。

開ける

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

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

開ける