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>

関連コンポーネント

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

eコマース用に設計されたシンプルなデータ視覚化コンポーネントで、鮮やかな色のダークモードインターフェイスを備えています。

開ける

Social_Connection_Chart_Component

有機的で自然にインスパイアされたデザインで、黒、白、単一の明るいアクセントカラーを特徴とする、適度な複雑さのソーシャルコネクションチャートコンポーネント。デートやソーシャルプラットフォーム向けに設計されており、流れるような線とユーザーのアバターでつながりを視覚的に紹介します。ダークモードのサポートにより、完全にレスポンシブです。

開ける

Eコマースデータ視覚化コンポーネントコンポーネント

マテリアルデザインの原則、アースカラー、Tailwind CSSを使用したレスポンシブダークモードのサポートでスタイル化された、eコマース用のデータ視覚化コンポーネント。

開ける