CCHub Logo CCHub Tailwind Collection
コンポーネント グラフ VibrantGlass射定チャート

VibrantGlass射定チャート

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

プレビュー

HTMLコード 

<div class="p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg max-w-sm mx-auto dark:bg-gray-800 dark:bg-opacity-20">
  <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Sales Overview</h3>
  <div class="relative h-40">
    <canvas id="myChart"></canvas>
  </div>
  <div class="flex justify-around mt-4 text-gray-700 dark:text-gray-300 text-sm">
    <div class="text-center">
      <p class="font-semibold text-teal-500 dark:text-teal-400">January</p>
      <p>$5,200</p>
    </div>
    <div class="text-center">
      <p class="font-semibold text-rose-500 dark:text-rose-400">February</p>
      <p>$6,100</p>
    </div>
    <div class="text-center">
      <p class="font-semibold text-fuchsia-500 dark:text-fuchsia-400">March</p>
      <p>$5,500</p>
    </div>
  </div>
</div>

関連コンポーネント

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

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

開ける

Memphis_Marketplace_Charts_Component

メンフィスデザインの美学、大胆な補色を備えた複雑で応答性の高いチャートコンポーネントで、マルチベンダーマーケットプレイスに適しています。ダークモードのサポートとインタラクティブな要素が含まれています。

開ける

Retro_Vintage_Charts_Component

レトロ/ビンテージの美学を備えた複雑なスポーツ/フィットネスチャートコンポーネントは、アースカラーを使用し、応答性とダークモードのサポートのために設計されています。

開ける