CCHub Logo CCHub Tailwind Collection
コンポーネント データ視覚化コンポーネント データ視覚化コンポーネントコンポーネント

データ視覚化コンポーネントコンポーネント

類似の配色を持つソーシャルメディア用のシンプルなダークモードデータ視覚化コンポーネント。

プレビュー

HTMLコード 

<div class="bg-gray-900 min-h-screen p-4 text-gray-200">
  <div class="max-w-md mx-auto bg-gray-800 rounded-lg shadow-lg p-6">
    <h2 class="text-xl font-bold mb-4 text-blue-300">Social Media Engagement</h2>
    <div class="space-y-4">
      <div class="flex items-center justify-between">
        <span class="text-gray-400">Likes:</span>
        <span class="text-blue-400 font-semibold">12,345</span>
      </div>
      <div class="flex items-center justify-between">
        <span class="text-gray-400">Comments:</span>
        <span class="text-green-400 font-semibold">890</span>
      </div>
      <div class="flex items-center justify-between">
        <span class="text-gray-400">Shares:</span>
        <span class="text-teal-400 font-semibold">321</span>
      </div>
      <div class="w-full bg-gray-700 rounded-full h-2.5 mt-4">
        <div class="bg-gradient-to-r from-blue-400 via-green-400 to-teal-400 h-2.5 rounded-full" style="width: 75%;"></div>
      </div>
      <p class="text-sm text-gray-500 text-center mt-2">Overall Engagement: 75%</p>
    </div>
  </div>
</div>

関連コンポーネント

Sports_Fitness_Dashboard_Monospace

モノスペースフォント、ターミナルの美学、オーシャン/ブルーの色調を備えた、コードにインスパイアされたすっきりとしたスポーツ/フィットネスダッシュボードコンポーネント。レスポンシブデザイン、ダークモードのサポート、スポーツチームやフィットネスアプリケーションに適したデータ視覚化要素を備えています。

開ける

データ視覚化コンポーネント

Tailwind CSS を使用してブルータリズム スタイルでデザインされたデータ視覚化コンポーネントで、レスポンシブ レイアウトとダーク テーマのサポートが特徴です。

開ける

データ視覚化コンポーネントコンポーネント

ネオン/エレクトリックカラースキームの複雑でミニマリストな予約/予約コンポーネントで、カレンダーやタイムスロットセレクターなどのデータ視覚化要素を備えています。ダークモードのサポートにより完全にレスポンシブ。

開ける