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

RetroChartsコンポーネント

レスポンシブ効果とTailwind CSSを使用したダークテーマのサポートを備えたレトロ/ビンテージチャートコンポーネント。プレースホルダー画像が含まれています。

プレビュー

HTMLコード 

<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Sales Performance</h2>
  <div class="relative h-48">
    <!-- Placeholder SVG for chart - In a real application, this would be a charting library -->
    <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
      <path fill="#4B5563" d="M0,100 L0,80 C10,75 20,78 30,70 C40,65 50,68 60,60 C70,55 80,58 90,50 C100,45 100,100 Z" class="dark:fill-gray-700"></path>
      <path fill="#6B7280" d="M0,100 L0,85 C10,80 20,83 30,75 C40,70 50,73 60,65 C70,60 80,63 90,55 C100,50 100,100 Z" class="dark:fill-gray-600"></path>
    </svg>
    <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center text-gray-600 dark:text-gray-300 text-sm font-mono">Chart Data Not Available</div>
  </div>
  <div class="mt-4 flex justify-between text-gray-700 dark:text-gray-300 text-sm">
    <span>January</span>
    <span>February</span>
    <span>March</span>
    <span>April</span>
    <span>May</span>
  </div>
</div>

関連コンポーネント

Glassmorphism 販売チャート

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

開ける

グラフ コンポーネント

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

開ける

VibrantGlass射定チャート

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

開ける