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

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

ブルータリズム スタイルでデザインされたヒート マップ コンポーネントで、高コントラストと Tailwind CSS を使用した珍しいレイアウトが特徴です。レスポンシブエフェクトとダークテーマをサポートしています。

プレビュー

HTMLコード 

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

関連コンポーネント

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

パステルカラーの配色を使用してレトロ/ビンテージの美学でデザインされたシンプルなレスポンシブヒートマップコンポーネントで、ダッシュボードに適しています。Tailwind CSSによるダークテーマのサポートが特徴です。

開ける

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

Tailwind CSSで構築された、ダークテーマをサポートするレスポンシブヒートマップコンポーネント。最小限の要素でシンプルなレイアウトが特徴で、ブログやコンテンツの消費に適しています。

開ける

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

インタラクティブな機能、レスポンシブデザイン、Tailwind CSSを使用したダークテーマのサポートを備えたポートフォリオを紹介するミニマリストのヒートマップコンポーネント。

開ける