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

グラフ コンポーネント

ダークモードのeコマースWebアプリケーション用に設計された複雑なグラフコンポーネントで、グレースケールの配色が施されています。このコンポーネントには、グラフ、データ ポイント、ツールチップ、ボタンなどの複数のインタラクティブ要素が含まれており、Tailwind CSS を使用したレスポンシブ デザインです。

プレビュー

HTMLコード 

<div class="bg-gray-900 text-gray-100 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4">Sales Chart</h2>
    <div class="flex items-center justify-between mb-4">
        <span class="text-lg">Last 30 Days</span>
        <button class="bg-gray-700 hover:bg-gray-600 text-gray-100 py-1 px-3 rounded">Weekly</button>
        <button class="bg-gray-700 hover:bg-gray-600 text-gray-100 py-1 px-3 rounded">Monthly</button>
        <button class="bg-gray-700 hover:bg-gray-600 text-gray-100 py-1 px-3 rounded">Yearly</button>
    </div>
    <div class="relative">
        <img src="https://picsum.photos/600/300" alt="Sales Chart" class="w-full rounded-lg">
        <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center bg-gray-800 bg-opacity-50 rounded-lg">
            <span class="text-xl font-semibold">$23,000</span>
            <span class="text-sm">Total Sales</span>
        </div>
    </div>
    <div class="mt-4">
        <div class="flex justify-around text-sm text-gray-400">
            <div class="text-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mb-2">
                <span>User 1</span>
            </div>
            <div class="text-center">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mb-2">
                <span>User 2</span>
            </div>
            <div class="text-center">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mb-2">
                <span>User 3</span>
            </div>
        </div>
    </div>
</div>

関連コンポーネント

サイバーパンクチャートコンポーネント - 政府/公共

サイバーパンクの美学を備えた適度に複雑なチャートコンポーネントで、政府や公共サービスのWebサイトに適しています。暗い背景、明るいネオンのアクセント、レトロ/ビンテージのカラーパレットが特徴です。レスポンシブで、ダークモードのサポートが含まれています。

開ける

Retro_Vintage_Pastel_Social_Charts_Component

パステルカラーを使用したレトロ/ビンテージの80年代/90年代の美学を備えた、ソーシャルメディアプラットフォーム向けに設計された、複雑で応答性の高いチャートコンポーネント。ダークモードのサポートが含まれています。

開ける

ニューモーフィックチャートコンポーネント

ニューモーフィックなデザインスタイルと類似の配色を備えた複雑で応答性の高いチャートコンポーネントで、作業や製品を紹介するポートフォリオに適しています。ダークモードのサポートが含まれています。

開ける