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>

関連コンポーネント

Skeuomorphic_Vibrant_Business_Dashboard

ビジネス/企業での使用向けに設計された、鮮やかな色の複雑で応答性の高いスキューモーフィックダッシュボードコンポーネントで、データの視覚化とダークモードをサポートするインタラクティブ要素を備えています。

開ける

Sports_Fitness_Dashboard_Monospace

モノスペースフォント、ターミナルの美学、オーシャン/ブルーの色調を備えた、コードにインスパイアされたすっきりとしたスポーツ/フィットネスダッシュボードコンポーネント。レスポンシブデザイン、ダークモードのサポート、スポーツチームやフィットネスアプリケーションに適したデータ視覚化要素を備えています。

開ける

データ視覚化コンポーネント - 工業型農業

紫/紫の配色を利用した、工業的で生の美学を備えたデータ視覚化コンポーネントで、農業や農業のWebサイトに適しています。主要なメトリクスを、ダークモードをサポートするレスポンシブレイアウトで表示します。

開ける