ヒートマップコンポーネント
インタラクティブな機能、レスポンシブデザイン、Tailwind CSSを使用したダークテーマのサポートを備えたポートフォリオを紹介するミニマリストのヒートマップコンポーネント。
HTMLコード
<div class="max-w-4xl mx-auto p-5">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Portfolio Heat Maps</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<!-- Example Heat Map Item -->
<div class="bg-red-300 dark:bg-red-800 p-4 rounded-lg hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=1" alt="Project 1" class="rounded mb-2" />
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Project Title 1</h3>
<p class="text-gray-700 dark:text-gray-300">Description of project 1 goes here.</p>
</div>
<div class="bg-blue-300 dark:bg-blue-800 p-4 rounded-lg hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=2" alt="Project 2" class="rounded mb-2" />
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Project Title 2</h3>
<p class="text-gray-700 dark:text-gray-300">Description of project 2 goes here.</p>
</div>
<div class="bg-green-300 dark:bg-green-800 p-4 rounded-lg hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=3" alt="Project 3" class="rounded mb-2" />
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Project Title 3</h3>
<p class="text-gray-700 dark:text-gray-300">Description of project 3 goes here.</p>
</div>
<!-- Add more items as needed -->
</div>
</div>関連コンポーネント
ヒートマップコンポーネント
Earth-Tone を特徴とする glassmorphism スタイルで設計されたヒートマップコンポーネント。レイアウトはシンプルで、ビジネス/企業での使用を目的とした基本的な要素で構成され、ダークモードをサポートしています。
ヒートマップコンポーネント
パステルカラーの配色を使用してレトロ/ビンテージの美学でデザインされたシンプルなレスポンシブヒートマップコンポーネントで、ダッシュボードに適しています。Tailwind CSSによるダークテーマのサポートが特徴です。
ヒートマップEコマースコンポーネント
複雑でインタラクティブなデザインを特徴とする、eコマース用のミニマリストグレースケールヒートマップコンポーネント。応答性が高く、ダークモードをサポートします。