CCHub Logo CCHub Tailwind Collection
コンポーネント ダッシュ ボード ダッシュボードコンポーネント

ダッシュボードコンポーネント

マイクロインタラクション、グレースケールの配色、ブログ/コンテンツの目的に合わせた複雑な複雑さのレベルを備えたレスポンシブダッシュボードコンポーネント。ダークテーマをサポートします。

プレビュー

HTMLコード 

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8">
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">

    <!-- Content Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum/600/400" alt="Article thumbnail">
      <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Article Title 1</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis libero et diam euismod, vitae elementum.</p>
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
            <span class="text-gray-700 dark:text-gray-300 text-sm">John Doe</span>
          </div>
          <a href="#" class="text-gray-900 dark:text-white hover:underline">Read More &rarr;</a>
        </div>
      </div>
    </div>

    <!-- Content Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum/600/400" alt="Article thumbnail">
      <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Article Title 2</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar">
            <span class="text-gray-700 dark:text-gray-300 text-sm">Jane Smith</span>
          </div>
          <a href="#" class="text-gray-900 dark:text-white hover:underline">Read More &rarr;</a>
        </div>
      </div>
    </div>

    <!-- Content Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum/600/400" alt="Article thumbnail">
      <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Article Title 3</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Author Avatar">
            <span class="text-gray-700 dark:text-gray-300 text-sm">Peter Jones</span>
          </div>
          <a href="#" class="text-gray-900 dark:text-white hover:underline">Read More &rarr;</a>
        </div>
      </div>
    </div>

  </div>
</div>

関連コンポーネント

高級農業ダッシュボードコンポーネント

農業および農業Webサイト向けのエレガントで洗練されたダッシュボードコンポーネントで、鮮やかなエメラルドのアクセントが付いた黒と白の配色が特徴です。これには、主要な指標、最近のアクティビティ、インタラクティブな要素が含まれており、完全にレスポンシブでダークモードをサポートするように設計されています。

開ける

ラグジュアリー/プレミアムマーケットプレイスダッシュボードコンポーネント

マルチベンダーマーケットプレイス向けの複雑で応答性の高いダッシュボードコンポーネントで、ラグジュアリー/プレミアムなデザインスタイルを備えています。プロフェッショナルなコーポレートブルーの配色、洗練されたタイポグラフィ、ダークモードのサポートが特徴です。概要、最近の売上、上位の製品、および簡単な統計のセクションが含まれています。

開ける

レトロビジネスダッシュボード

ビジネス/企業のWebサイト向けのレトロ/ビンテージグレースケールダッシュボードコンポーネントで、適度な複雑さとレスポンシブデザインを備えています。スタイリングにTailwind CSS dark:プレフィックスを使用してダークテーマをサポートします。画像はpicsum.photosと randomuser.me のアバターから提供されました。

開ける