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

グラフ コンポーネント

パステルカラーとダークモードをサポートするシンプルで応答性の高いチャートコンポーネントで、ホバー効果による微妙なマイクロインタラクションによるブログ/コンテンツの消費向けに設計されています。JavaScript はありません。

プレビュー

HTMLコード 

<div class="container mx-auto p-4">
  <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Sales Overview</h2>
    <div class="flex flex-col space-y-4">
      <div class="flex items-center justify-between hover:scale-105 transition-transform duration-200 eas-in-out cursor-pointer p-2 rounded-md bg-blue-100 dark:bg-blue-700">
        <div class="text-sm font-medium text-blue-800 dark:text-blue-200">January</div>
        <div class="w-2/3 bg-blue-200 dark:bg-blue-600 rounded-full h-4">
          <div class="bg-blue-500 dark:bg-blue-400 h-4 rounded-full stunning-animation" style="width: 75%;"></div>
        </div>
        <div class="text-sm font-medium text-blue-800 dark:text-blue-200">75%</div>
      </div>
      <div class="flex items-center justify-between hover:scale-105 transition-transform duration-200 eas-in-out cursor-pointer p-2 rounded-md bg-green-100 dark:bg-green-700">
        <div class="text-sm font-medium text-green-800 dark:text-green-200">February</div>
        <div class="w-2/3 bg-green-200 dark:bg-green-600 rounded-full h-4">
          <div class="bg-green-500 dark:bg-green-400 h-4 rounded-full stunning-animation" style="width: 60%;"></div>
        </div>
        <div class="text-sm font-medium text-green-800 dark:text-green-200">60%</div>
      </div>
      <div class="flex items-center justify-between hover:scale-105 transition-transform duration-200 eas-in-out cursor-pointer p-2 rounded-md bg-purple-100 dark:bg-purple-700">
        <div class="text-sm font-medium text-purple-800 dark:text-purple-200">March</div>
        <div class="w-2/3 bg-purple-200 dark:bg-purple-600 rounded-full h-4">
          <div class="bg-purple-500 dark:bg-purple-400 h-4 rounded-full stunning-animation" style="width: 90%;"></div>
        </div>
        <div class="text-sm font-medium text-purple-800 dark:text-purple-200">90%</div>
      </div>
    </div>
  </div>
</div>

関連コンポーネント

グラフ コンポーネント

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

開ける

VibrantGlass射定チャート

ブログやコンテンツサイトに適した、鮮やかな色のシンプルなGlassmorphismチャートコンポーネントです。このコンポーネントはレスポンシブで、Tailwind CSS を使用したダーク テーマのサポートが含まれています。

開ける

グラフ コンポーネント

ビジネス Web サイト用のブルータリズム スタイルのチャート コンポーネントで、トライアドの配色と適度な複雑さが特徴です。レスポンシブデザインとTailwind CSSを使用したダークモードのサポートが含まれています。

開ける