CCHub Logo CCHub Tailwind Collection
コンポーネント データ視覚化コンポーネント データ視覚化コンポーネント

データ視覚化コンポーネント

グリッドベースのレイアウトや深度効果などのマテリアルデザインの原則に基づいて設計されたレスポンシブデータ視覚化コンポーネントで、ダークテーマをサポートしています。

プレビュー

HTMLコード 

<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md transition-all ease-in-out duration-300">
    <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Data Visualization</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
            <h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 1</h3>
            <img src="https://picsum.photos/200/150" alt="Placeholder Image" class="rounded-lg mt-2" />
            <p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 1 goes here.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
            <h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 2</h3>
            <img src="https://picsum.photos/200/151" alt="Placeholder Image" class="rounded-lg mt-2" />
            <p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 2 goes here.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
            <h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 3</h3>
            <img src="https://picsum.photos/200/152" alt="Placeholder Image" class="rounded-lg mt-2" />
            <p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 3 goes here.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
            <h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 4</h3>
            <img src="https://picsum.photos/200/153" alt="Placeholder Image" class="rounded-lg mt-2" />
            <p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 4 goes here.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
            <h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 5</h3>
            <img src="https://picsum.photos/200/154" alt="Placeholder Image" class="rounded-lg mt-2" />
            <p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 5 goes here.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
            <h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 6</h3>
            <img src="https://picsum.photos/200/155" alt="Placeholder Image" class="rounded-lg mt-2" />
            <p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 6 goes here.</p>
        </div>
    </div>
    <div class="mt-4 text-center">
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-all duration-200">Load More</button>
    </div>
</div>

関連コンポーネント

CRM_Data_Visualization_Component

水彩画/芸術的なスタイル、単色の配色、およびダークモードをサポートする、複雑で応答性の高いCRMデータ視覚化コンポーネント。ビジネスツール用に設計されています。

開ける

Weather_Climate_Retro_Dark_Dashboard

レトロなテーマのシンプルなダークモードダッシュボードコンポーネントで、天気と気候のデータが表示され、すべてのデバイスで応答します。

開ける

データ視覚化コンポーネント

Tailwind CSS を使用したマテリアル デザイン スタイルを使用したデータ視覚化用の Web コンポーネントで、レスポンシブ レイアウト、ダーク テーマのサポート、プレースホルダー イメージが特徴です。

開ける