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

グラフ コンポーネント

レスポンシブエフェクトとダークテーマのサポートを備えたシンプルでミニマリストのチャートコンポーネント。

プレビュー

HTMLコード 

<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
  <h2 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">Sales Performance</h2>
  <div class="flex justify-between items-center mb-4">
    <div class="text-sm text-gray-500 dark:text-gray-400">Last 30 Days</div>
    <select class="text-sm text-gray-500 dark:text-gray-400 bg-transparent border-none">
      <option>Monthly</option>
      <option>Weekly</option>
      <option>Daily</option>
    </select>
  </div>
  <div class="h-40">
    <!-- Placeholder for chart -->
    <div class="flex items-end h-full">
      <div class="w-1/6 bg-blue-500 h-3/4 rounded-t dark:bg-blue-600"></div>
      <div class="w-1/6 bg-blue-500 h-2/4 rounded-t dark:bg-blue-600 ml-1"></div>
      <div class="w-1/6 bg-blue-500 h-1/4 rounded-t dark:bg-blue-600 ml-1"></div>
      <div class="w-1/6 bg-blue-500 h-full rounded-t dark:bg-blue-600 ml-1"></div>
      <div class="w-1/6 bg-blue-500 h-3/4 rounded-t dark:bg-blue-600 ml-1"></div>
      <div class="w-1/6 bg-blue-500 h-2/4 rounded-t dark:bg-blue-600 ml-1"></div>
    </div>
  </div>
</div>

関連コンポーネント

グラフ コンポーネント

パステルカラーとダークモードをサポートするスキューモーフィックデザインを示すレスポンシブダッシュボードコンポーネントで、純粋なHTMLとTailwind CSSを使用してシミュレートされた棒グラフ、折れ線グラフ、主要業績評価指標を備えています。JavaScriptは含まれていません。チャートは視覚的に表現されています。

開ける

Industrial_Retro_RealEstate_Charts

インダストリアルでレトロな不動産の美学を備えたシンプルなチャートコンポーネントで、落ち着いた色、露出した要素、ダークモードをサポートするレスポンシブデザインが特徴です。

開ける

スキューモーフィズム チャート コンポーネント

Skeuomorphism スタイル、鮮やかな色、ソーシャル メディア インターフェイスのダーク モードのサポートを備えた応答性の高いグラフ コンポーネント。

開ける