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

グラフ コンポーネント

マテリアルデザインの原則に基づいて設計されたレスポンシブチャートコンポーネントで、パステルカラーの配色とポートフォリオを表示するための複雑なインタラクティブ性が特徴です。これには、Tailwind CSSクラスによるダークモードのサポートが含まれています。

プレビュー

HTMLコード 

<div class="p-6 max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Portfolio Charts</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-pink-100 dark:bg-pink-900 rounded-lg shadow-lg p-4">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Sales Overview</h3>
            <img src="https://picsum.photos/400/200" alt="Sales Chart" class="rounded-lg shadow-md">
        </div>
        <div class="bg-blue-100 dark:bg-blue-900 rounded-lg shadow-lg p-4">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">User Engagement</h3>
            <img src="https://picsum.photos/400/200?random=1" alt="Engagement Chart" class="rounded-lg shadow-md">
        </div>
        <div class="bg-green-100 dark:bg-green-900 rounded-lg shadow-lg p-4">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Traffic Sources</h3>
            <img src="https://picsum.photos/400/200?random=2" alt="Traffic Sources Chart" class="rounded-lg shadow-md">
        </div>
        <div class="bg-yellow-100 dark:bg-yellow-900 rounded-lg shadow-lg p-4">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Customer Feedback</h3>
            <img src="https://picsum.photos/400/200?random=3" alt="Feedback Chart" class="rounded-lg shadow-md">
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Team Members</h3>
        <div class="flex flex-wrap mt-4 gap-4">
            <div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-4 flex items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
                <p class="text-gray-800 dark:text-gray-200">John Doe</p>
            </div>
            <div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-4 flex items-center">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
                <p class="text-gray-800 dark:text-gray-200">Jane Smith</p>
            </div>
            <div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-4 flex items-center">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
                <p class="text-gray-800 dark:text-gray-200">Alex Johnson</p>
            </div>
            <div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-4 flex items-center">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
                <p class="text-gray-800 dark:text-gray-200">Emily Davis</p>
            </div>
        </div>
    </div>
</div>

関連コンポーネント

グラフ コンポーネント

ビジネスおよび企業のWebサイト向けに設計された複雑なチャートコンポーネントで、3Dデザイン、補色スキーム、ダークモードをサポートするレスポンシブ構造が特徴です。

開ける

Sports_Fitness_Charts_Component

スポーツおよびフィットネスアプリケーション向けの複雑で応答性の高いチャートコンポーネントで、黒と白のベースと単一のアクセントカラーを備えたすっきりとしたミニマルなスイスタイポグラフィデザインが特徴です。ダークモードのサポートと、さまざまなデータ視覚化のためのグリッドベースのレイアウトが含まれています。

開ける

グラフ コンポーネント

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

開ける