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

アースカラー、適度な複雑さ、ダークテーマをサポートするレスポンシブデザインを備えたブルータリズムスタイルで設計されたヒートマップコンポーネント。

プレビュー

HTMLコード

<div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg">
    <h2 class="text-2xl font-bold mb-4 text-brown-800 dark:text-brown-200">Project Heat Maps</h2>
    <p class="mb-6 text-gray-700 dark:text-gray-300">Showcasing data visualizations through temperature maps in a bold and raw design style.</p>
    <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
        <div class="bg-brown-200 dark:bg-brown-700 rounded-lg shadow-md p-4">
            <img src="https://picsum.photos/400/200?random=1" alt="Heat Map 1" class="rounded-lg mb-2">
            <h3 class="font-bold text-lg text-brown-800 dark:text-brown-200">Heat Map 1</h3>
            <p class="text-brown-600 dark:text-brown-300">Description of heat map 1, highlighting interesting data points.</p>
        </div>
        <div class="bg-brown-200 dark:bg-brown-700 rounded-lg shadow-md p-4">
            <img src="https://picsum.photos/400/200?random=2" alt="Heat Map 2" class="rounded-lg mb-2">
            <h3 class="font-bold text-lg text-brown-800 dark:text-brown-200">Heat Map 2</h3>
            <p class="text-brown-600 dark:text-brown-300">Description of heat map 2, showcasing a different aspect of the data.</p>
        </div>
        <div class="bg-brown-200 dark:bg-brown-700 rounded-lg shadow-md p-4">
            <img src="https://picsum.photos/400/200?random=3" alt="Heat Map 3" class="rounded-lg mb-2">
            <h3 class="font-bold text-lg text-brown-800 dark:text-brown-200">Heat Map 3</h3>
            <p class="text-brown-600 dark:text-brown-300">Description of heat map 3, emphasizing key trends.</p>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="font-bold text-xl text-brown-800 dark:text-brown-200">Team</h3>
        <div class="flex space-x-4 mt-2">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar 1" class="w-12 h-12 rounded-full border-2 border-brown-800 dark:border-brown-200">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar 2" class="w-12 h-12 rounded-full border-2 border-brown-800 dark:border-brown-200">
            <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="Avatar 3" class="w-12 h-12 rounded-full border-2 border-brown-800 dark:border-brown-200">
        </div>
    </div>
</div>

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

プレビュー

HTMLコード

関連コンポーネント

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

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

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