CCHub Logo CCHub Tailwind Collection
コンポーネント グラフ Glassmorphism 販売チャート

Glassmorphism 販売チャート

Glassmorphism スタイル、鮮やかな配色、ダーク モードのサポートを備えたシンプルで応答性の高いグラフ コンポーネントで、e コマース ダッシュボードに適しています。

プレビュー

HTMLコード 

<div class="p-4 bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-30">
  <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Sales Overview</h3>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="text-center">
      <p class="text-sm text-gray-600 dark:text-gray-300">Weekly Sales</p>
      <p class="text-2xl font-bold text-purple-600 dark:text-purple-400">$5,200</p>
    </div>
    <div class="text-center">
      <p class="text-sm text-gray-600 dark:text-gray-300">Monthly Sales</p>
      <p class="text-2xl font-bold text-teal-600 dark:text-teal-400">$18,500</p>
    </div>
  </div>
  <div class="mt-6">
    <div class="h-32 bg-gradient-to-r from-purple-400 to-teal-400 rounded-lg dark:from-purple-600 dark:to-teal-600"></div>
  </div>
</div>

関連コンポーネント

Retro_Vintage_Pastel_Social_Charts_Component

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

開ける

グラフ コンポーネント

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

開ける

Industrial_Chart_Component_Ocean_Blue_Simple

海/青の色調を使用した工業的な原材料の美学を備えたシンプルで応答性の高いチャートコンポーネントで、非営利団体/慈善団体向けに設計されています。ダークモードのサポートが含まれています。

開ける