CCHub Logo CCHub Tailwind Collection
コンポーネント グラフ グラフ コンポーネント

グラフ コンポーネント

スキューモーフィズムスタイルで設計されたレスポンシブチャートコンポーネントで、グレースケールのカラースキームとダークモードのサポートにより、eコマースアプリケーションに最適です。

プレビュー

HTMLコード 

<div class="max-w-2xl mx-auto p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-2xl font-semibold text-gray-900 dark:text-white mb-6">Sales Data</h2>
    <div class="flex justify-between">
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 mr-4">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item A</h3>
            <img src="https://picsum.photos/200/100?random=1" alt="Item A" class="w-full rounded-md">
            <p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 150</p>
            <div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
                <div class="h-2 bg-blue-500 rounded-full w-3/4"></div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 ml-4">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item B</h3>
            <img src="https://picsum.photos/200/100?random=2" alt="Item B" class="w-full rounded-md">
            <p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 120</p>
            <div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
                <div class="h-2 bg-blue-500 rounded-full w-2/4"></div>
            </div>
        </div>
    </div>
    <div class="flex justify-between mt-4">
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 mr-4">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item C</h3>
            <img src="https://picsum.photos/200/100?random=3" alt="Item C" class="w-full rounded-md">
            <p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 100</p>
            <div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
                <div class="h-2 bg-blue-500 rounded-full w-1/4"></div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 ml-4">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item D</h3>
            <img src="https://picsum.photos/200/100?random=4" alt="Item D" class="w-full rounded-md">
            <p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 80</p>
            <div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
                <div class="h-2 bg-blue-500 rounded-full w-1/5"></div>
            </div>
        </div>
    </div>
</div>

関連コンポーネント

グラフ コンポーネント

Tailwind CSSを使用したダークテーマをサポートするレスポンシブ3Dスタイルのチャートコンポーネント。

開ける

グラフ コンポーネント

スポーツ/フィットネスアプリケーション向けのシンプルで応答性の高いチャートコンポーネントで、ジュエルトーンのダークモードUIを備えています。基本的な進行状況またはパフォーマンスのメトリックが表示されます。

開ける

Playful Rainbow Chartsコンポーネント(ファッション/ビューティー)

ファッションおよび美容ブランド向けに設計されたシンプルで遊び心のあるカラフルなチャートコンポーネントで、丸みを帯びた要素、虹のグラデーション、ダークモードのサポートによる完全な応答性が特徴です。

開ける