CCHub Logo CCHub Tailwind Collection
コンポーネント 製品ギャラリー 製品ギャラリーコンポーネント

製品ギャラリーコンポーネント

マテリアルデザインの原則に基づいて設計されたレスポンシブ製品ギャラリーコンポーネントで、アースカラーを特徴とし、ダッシュボードに適しており、ダークモードをサポートしています。

プレビュー

HTMLコード 

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6 bg-gray-100 dark:bg-gray-800">
  <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200" alt="Product Image" />
    <div class="p-4">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 1</h2>
      <p class="text-gray-600 dark:text-gray-400">A beautiful product description goes here.</p>
      <div class="flex items-center mt-4">
        <div class="flex-shrink-0">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
        </div>
        <div class="ml-3">
          <span class="text-sm font-semibold text-gray-800 dark:text-gray-200">Seller Name</span>
        </div>
      </div>
    </div>
  </div>
  <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/300/201" alt="Product Image" />
    <div class="p-4">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 2</h2>
      <p class="text-gray-600 dark:text-gray-400">A beautiful product description goes here.</p>
      <div class="flex items-center mt-4">
        <div class="flex-shrink-0">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" />
        </div>
        <div class="ml-3">
          <span class="text-sm font-semibold text-gray-800 dark:text-gray-200">Seller Name</span>
        </div>
      </div>
    </div>
  </div>
  <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/300/202" alt="Product Image" />
    <div class="p-4">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 3</h2>
      <p class="text-gray-600 dark:text-gray-400">A beautiful product description goes here.</p>
      <div class="flex items-center mt-4">
        <div class="flex-shrink-0">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" />
        </div>
        <div class="ml-3">
          <span class="text-sm font-semibold text-gray-800 dark:text-gray-200">Seller Name</span>
        </div>
      </div>
    </div>
  </div>
</div>

関連コンポーネント

製品ギャラリーコンポーネント

ブルータリズムのデザイン、グレースケールの配色、適度な複雑さを備えた製品ギャラリーコンポーネント。ダッシュボード用に設計されており、ダークテーマのサポートにより応答性があります。

開ける

製品ギャラリーコンポーネント

マテリアルデザインの原則に基づいて設計されたシンプルなレスポンシブ製品ギャラリーコンポーネントで、鮮やかな色とダークモードのサポートが特徴で、ダッシュボードに適しています。このコンポーネントは、スタイル設定に Tailwind CSS を使用します。

開ける

製品ギャラリーコンポーネント

3D要素で奥行きを出すために設計されたシンプルな製品ギャラリーコンポーネントで、トライアドカラースキームを使用しています。レスポンシブでダークテーマをサポートしており、作品や製品の展示に適しています。

開ける