検索コンポーネント

カテゴリ

製品ギャラリー

商品画像集

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

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

                <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>

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

ニューモーフィズムスタイルとトライアドカラースキームでデザインされたレスポンシブ製品ギャラリーコンポーネントで、ダークテーマをサポートし、作品や製品の展示に適しています。

開けるプレビュー

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg">  <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Product Gallery</h2>  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">    <div class="bg-white dark:bg-gray-700 shadow-xl rounded-lg p-4 transition-transform transform hover:scale-105">      <img src="https://picsum.photos/id/1012/300/200" alt="Product 1" class="rounded-lg mb-2">      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Title 1</h3>      <p class="text-gray-600 dark:text-gray-300">Short description of the product.</p>      <div class="flex items-center mt-2">        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600">        <span class="ml-2 text-gray-700 dark:text-gray-400">User Name</span>      </div>    </div>    <div class="bg-white dark:bg-gray-700 shadow-xl rounded-lg p-4 transition-transform transform hover:scale-105">      <img src="https://picsum.photos/id/1013/300/200" alt="Product 2" class="rounded-lg mb-2">      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Title 2</h3>      <p class="text-gray-600 dark:text-gray-300">Short description of the product.</p>      <div class="flex items-center mt-2">        <img src="https://randomuser.me/api/portraits/women/31.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600">        <span class="ml-2 text-gray-700 dark:text-gray-400">User Name</span>      </div>    </div>    <div class="bg-white dark:bg-gray-700 shadow-xl rounded-lg p-4 transition-transform transform hover:scale-105">      <img src="https://picsum.photos/id/1014/300/200" alt="Product 3" class="rounded-lg mb-2">      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Title 3</h3>      <p class="text-gray-600 dark:text-gray-300">Short description of the product.</p>      <div class="flex items-center mt-2">        <img src="https://randomuser.me/api/portraits/men/31.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600">        <span class="ml-2 text-gray-700 dark:text-gray-400">User Name</span>      </div>    </div>    <div class="bg-white dark:bg-gray-700 shadow-xl rounded-lg p-4 transition-transform transform hover:scale-105">      <img src="https://picsum.photos/id/1015/300/200" alt="Product 4" class="rounded-lg mb-2">      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Title 4</h3>      <p class="text-gray-600 dark:text-gray-300">Short description of the product.</p>      <div class="flex items-center mt-2">        <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600">        <span class="ml-2 text-gray-700 dark:text-gray-400">User Name</span>      </div>    </div>  </div></div>

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

Tailwind CSS を使用したレスポンシブ製品ギャラリーコンポーネントで、Neumorphic デザインスタイル、補色スキーム、ビジネス Web サイトに適した複雑なレイアウトを備えています。ダークモードのサポートが含まれており、picsum.photosの画像を使用します。

開けるプレビュー

                <div class="container mx-auto p-10 bg-gray-200 dark:bg-gray-800">
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-10">
    <!-- Product Card 1 -->
    <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image 1" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 1</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div class="flex items-center justify-between">
        <span class="text-lg font-bold text-blue-600 dark:text-blue-400">$99.99</span>
        <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image 2" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 2</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div class="flex items-center justify-between">
        <span class="text-lg font-bold text-green-600 dark:text-green-400">$149.99</span>
        <button class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image 3" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 3</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div class="flex items-center justify-between">
        <span class="text-lg font-bold text-red-600 dark:text-red-400">$199.99</span>
        <button class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
      </div>
    </div>

    <!-- Product Card 4 -->
    <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <img src="https://picsum.photos/seed/product4/400/300" alt="Product Image 4" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 4</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div class="flex items-center justify-between">
        <span class="text-lg font-bold text-purple-600 dark:text-purple-400">$249.99</span>
        <button class="bg-purple-500 hover:bg-purple-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
      </div>
    </div>
     <!-- Product Card 5 -->
    <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <img src="https://picsum.photos/seed/product5/400/300" alt="Product Image 5" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 5</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div class="flex items-center justify-between">
        <span class="text-lg font-bold text-yellow-600 dark:text-yellow-400">$299.99</span>
        <button class="bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
      </div>
    </div>
     <!-- Product Card 6 -->
    <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <img src="https://picsum.photos/seed/product6/400/300" alt="Product Image 6" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 6</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div class="flex items-center justify-between">
        <span class="text-lg font-bold text-teal-600 dark:text-teal-400">$349.99</span>
        <button class="bg-teal-500 hover:bg-teal-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom Neumorphic Shadows */
  .shadow-neumorphic-light {
    box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 7px 7px 15px #454545, -7px -7px 15px #b3b3b3;
  }
  .shadow-inner-neumorphic-light {
    box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
  }
   .dark .shadow-inner-neumorphic-dark {
    box-shadow: inset 5px 5px 10px #454545, inset -5px -5px 10px #b3b3b3;
  }
</style>

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

レトロ/ビンテージスタイルのレスポンシブ製品ギャラリーで、補色の配色が特徴で、ダークモードをサポートするビジネス/企業のWebサイト向けに設計されています。

開けるプレビュー

                <div class="max-w-6xl mx-auto p-5">
    <h2 class="text-3xl font-bold text-center text-amber-500">Product Gallery</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
        <!-- Product Card -->
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=1" alt="Product 1" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-orange-300">Product Title 1</h3>
                <p class="text-gray-400">A brief description of the product that highlights its features.</p>
                <div class="flex items-center justify-between mt-4">
                    <span class="text-xl text-amber-500 font-bold">$29.99</span>
                    <button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
                </div>
            </div>
        </div>
        <!-- Product Card -->
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=2" alt="Product 2" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-orange-300">Product Title 2</h3>
                <p class="text-gray-400">A brief description of the product that highlights its features.</p>
                <div class="flex items-center justify-between mt-4">
                    <span class="text-xl text-amber-500 font-bold">$39.99</span>
                    <button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
                </div>
            </div>
        </div>
        <!-- Product Card -->
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=3" alt="Product 3" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-orange-300">Product Title 3</h3>
                <p class="text-gray-400">A brief description of the product that highlights its features.</p>
                <div class="flex items-center justify-between mt-4">
                    <span class="text-xl text-amber-500 font-bold">$19.99</span>
                    <button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
                </div>
            </div>
        </div>
        <!-- Product Card -->
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=4" alt="Product 4" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-orange-300">Product Title 4</h3>
                <p class="text-gray-400">A brief description of the product that highlights its features.</p>
                <div class="flex items-center justify-between mt-4">
                    <span class="text-xl text-amber-500 font-bold">$49.99</span>
                    <button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
                </div>
            </div>
        </div>
        <!-- Product Card -->
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=5" alt="Product 5" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-orange-300">Product Title 5</h3>
                <p class="text-gray-400">A brief description of the product that highlights its features.</p>
                <div class="flex items-center justify-between mt-4">
                    <span class="text-xl text-amber-500 font-bold">$59.99</span>
                    <button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
                </div>
            </div>
        </div>
        <!-- Product Card -->
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=6" alt="Product 6" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-orange-300">Product Title 6</h3>
                <p class="text-gray-400">A brief description of the product that highlights its features.</p>
                <div class="flex items-center justify-between mt-4">
                    <span class="text-xl text-amber-500 font-bold">$69.99</span>
                    <button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
                </div>
            </div>
        </div>
    </div>
</div>

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

マテリアルデザインスタイルでデザインされた製品ギャラリーコンポーネントで、トライアドカラースキームを採用しています。グリッドベースのレイアウト、レスポンシブアニメーションが特徴で、ダークテーマをサポートしています。ギャラリーには画像とアバターが含まれており、ダッシュボードに適しています。

開けるプレビュー

                <div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
  <h2 class="text-2xl font-semibold text-gray-900 dark:text-white mb-4">Product Gallery</h2>
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
      <img src="https://picsum.photos/300/200?random=1" alt="Product Image 1" class="w-full h-40 object-cover">
      <div class="p-4">
        <h3 class="font-medium text-gray-800 dark:text-white">Product Title 1</h3>
        <p class="text-gray-600 dark:text-gray-300">Description of Product 1. This is a great product that offers many features.</p>
        <div class="flex items-center mt-2">
          <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
          <span class="text-gray-700 dark:text-gray-200">User Name</span>
        </div>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
      <img src="https://picsum.photos/300/200?random=2" alt="Product Image 2" class="w-full h-40 object-cover">
      <div class="p-4">
        <h3 class="font-medium text-gray-800 dark:text-white">Product Title 2</h3>
        <p class="text-gray-600 dark:text-gray-300">Description of Product 2. This is a great product that offers many features.</p>
        <div class="flex items-center mt-2">
          <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
          <span class="text-gray-700 dark:text-gray-200">User Name</span>
        </div>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
      <img src="https://picsum.photos/300/200?random=3" alt="Product Image 3" class="w-full h-40 object-cover">
      <div class="p-4">
        <h3 class="font-medium text-gray-800 dark:text-white">Product Title 3</h3>
        <p class="text-gray-600 dark:text-gray-300">Description of Product 3. This is a great product that offers many features.</p>
        <div class="flex items-center mt-2">
          <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
          <span class="text-gray-700 dark:text-gray-200">User Name</span>
        </div>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
      <img src="https://picsum.photos/300/200?random=4" alt="Product Image 4" class="w-full h-40 object-cover">
      <div class="p-4">
        <h3 class="font-medium text-gray-800 dark:text-white">Product Title 4</h3>
        <p class="text-gray-600 dark:text-gray-300">Description of Product 4. This is a great product that offers many features.</p>
        <div class="flex items-center mt-2">
          <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
          <span class="text-gray-700 dark:text-gray-200">User Name</span>
        </div>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
      <img src="https://picsum.photos/300/200?random=5" alt="Product Image 5" class="w-full h-40 object-cover">
      <div class="p-4">
        <h3 class="font-medium text-gray-800 dark:text-white">Product Title 5</h3>
        <p class="text-gray-600 dark:text-gray-300">Description of Product 5. This is a great product that offers many features.</p>
        <div class="flex items-center mt-2">
          <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
          <span class="text-gray-700 dark:text-gray-200">User Name</span>
        </div>
      </div>
    </div>
  </div>
</div>

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

ダークテーマのサポート、マテリアルデザインスタイル、アースカラーの配色、シンプルな複雑さ、Eコマース用のレスポンシブ製品ギャラリーコンポーネント。

開けるプレビュー

                <div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800">
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
    <!-- Product Card 1 -->
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
      <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image 1" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Product Title 1</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-1">Short description of the product.</p>
        <div class="flex items-center justify-between mt-4">
          <span class="text-xl font-bold text-gray-800 dark:text-gray-100">$29.99</span>
          <button class="bg-green-600 text-white px-3 py-2 rounded-md hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800">Add to Cart</button>
        </div>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
      <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image 2" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Product Title 2</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-1">Short description of the product.</p>
        <div class="flex items-center justify-between mt-4">
          <span class="text-xl font-bold text-gray-800 dark:text-gray-100">$39.50</span>
          <button class="bg-green-600 text-white px-3 py-2 rounded-md hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800">Add to Cart</button>
        </div>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
      <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image 3" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Product Title 3</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-1">Short description of the product.</p>
        <div class="flex items-center justify-between mt-4">
          <span class="text-xl font-bold text-gray-800 dark:text-gray-100">$19.00</span>
          <button class="bg-green-600 text-white px-3 py-2 rounded-md hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800">Add to Cart</button>
        </div>
      </div>
    </div>
  </div>
</div>

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

ダークモード UI 用に設計されたレスポンシブ製品ギャラリーコンポーネントで、補色が特徴で、ソーシャルメディアネットワーキングインターフェイスに適しています。

開けるプレビュー

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg">
    <h2 class="text-xl font-bold mb-4">Product Gallery</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Product Item -->
        <div class="bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/300?random=1" alt="Product 1" class="w-full h-48 object-cover rounded-t-lg">
            <div class="mt-2">
                <h3 class="text-lg font-semibold">Product 1</h3>
                <p class="text-gray-300">Description of product 1 in this gallery.</p>
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                    <span class="text-gray-400">by John Doe</span>
                </div>
            </div>
        </div>
        <!-- Product Item -->
        <div class="bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/300?random=2" alt="Product 2" class="w-full h-48 object-cover rounded-t-lg">
            <div class="mt-2">
                <h3 class="text-lg font-semibold">Product 2</h3>
                <p class="text-gray-300">Description of product 2 in this gallery.</p>
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                    <span class="text-gray-400">by Jane Doe</span>
                </div>
            </div>
        </div>
        <!-- Product Item -->
        <div class="bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/300?random=3" alt="Product 3" class="w-full h-48 object-cover rounded-t-lg">
            <div class="mt-2">
                <h3 class="text-lg font-semibold">Product 3</h3>
                <p class="text-gray-300">Description of product 3 in this gallery.</p>
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                    <span class="text-gray-400">by Alex Smith</span>
                </div>
            </div>
        </div>
        <!-- Additional Product Items can go here -->
    </div>
</div>

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

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

開けるプレビュー

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
  <h2 class="text-2xl font-bold mb-4 text-center text-gray-800 dark:text-gray-200">Product Gallery</h2>
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
    <div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Product 1">
      <div class="p-4 bg-white dark:bg-gray-700">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 1</h3>
        <p class="text-gray-600 dark:text-gray-400">Description of product 1.</p>
      </div>
    </div>
    <div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Product 2">
      <div class="p-4 bg-white dark:bg-gray-700">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 2</h3>
        <p class="text-gray-600 dark:text-gray-400">Description of product 2.</p>
      </div>
    </div>
    <div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Product 3">
      <div class="p-4 bg-white dark:bg-gray-700">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 3</h3>
        <p class="text-gray-600 dark:text-gray-400">Description of product 3.</p>
      </div>
    </div>
    <div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=4" alt="Product 4">
      <div class="p-4 bg-white dark:bg-gray-700">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 4</h3>
        <p class="text-gray-600 dark:text-gray-400">Description of product 4.</p>
      </div>
    </div>
    <div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=5" alt="Product 5">
      <div class="p-4 bg-white dark:bg-gray-700">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 5</h3>
        <p class="text-gray-600 dark:text-gray-400">Description of product 5.</p>
      </div>
    </div>
    <div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=6" alt="Product 6">
      <div class="p-4 bg-white dark:bg-gray-700">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 6</h3>
        <p class="text-gray-600 dark:text-gray-400">Description of product 6.</p>
      </div>
    </div>
  </div>
</div>

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

ソーシャルメディアに適したパステルカラーの配色でブルータリズムスタイルでデザインされたレスポンシブ製品ギャラリーコンポーネント。高コントラストで大胆なデザイン要素が特徴で、ダークモードに最適化されています。

開けるプレビュー

                <div class="max-w-4xl mx-auto p-4">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 text-center mb-6">Product Gallery</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-pastel-yellow rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
            <img src="https://picsum.photos/200/300?random=1" alt="Product 1" class="w-full h-40 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 1.</p>
            <button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
        </div>
        <div class="bg-pastel-green rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
            <img src="https://picsum.photos/200/300?random=2" alt="Product 2" class="w-full h-40 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 2.</p>
            <button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
        </div>
        <div class="bg-pastel-purple rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
            <img src="https://picsum.photos/200/300?random=3" alt="Product 3" class="w-full h-40 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 3</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 3.</p>
            <button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
        </div>
        <div class="bg-pastel-orange rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
            <img src="https://picsum.photos/200/300?random=4" alt="Product 4" class="w-full h-40 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 4</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 4.</p>
            <button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
        </div>
        <div class="bg-pastel-pink rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
            <img src="https://picsum.photos/200/300?random=5" alt="Product 5" class="w-full h-40 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 5</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 5.</p>
            <button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
        </div>
        <div class="bg-pastel-teal rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
            <img src="https://picsum.photos/200/300?random=6" alt="Product 6" class="w-full h-40 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 6</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 6.</p>
            <button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
        </div>
    </div>
</div>

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

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

開けるプレビュー

                <div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white p-6">
  <div class="container mx-auto">
    <h2 class="text-3xl font-bold mb-6 border-b-4 border-gray-900 dark:border-white pb-2">Product Gallery</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="border-4 border-gray-900 dark:border-white p-4 relative">
        <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-white">
        <h3 class="text-xl font-bold mb-2">Product Name 1</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of the product goes here. It's a fantastic product that will change your life.</p>
        <span class="text-2xl font-bold absolute top-4 right-4">$199.99</span>
        <button class="mt-4 px-4 py-2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 font-bold border-2 border-gray-900 dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
      </div>
      <div class="border-4 border-gray-900 dark:border-white p-4 relative">
        <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-white">
        <h3 class="text-xl font-bold mb-2">Product Name 2</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-4">Another amazing product with features you won't believe. Get yours today!</p>
         <span class="text-2xl font-bold absolute top-4 right-4">$249.00</span>
        <button class="mt-4 px-4 py-2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 font-bold border-2 border-gray-900 dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
      </div>
      <div class="border-4 border-gray-900 dark:border-white p-4 relative">
        <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-white">
        <h3 class="text-xl font-bold mb-2">Product Name 3</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-4">You won't want to miss out on this one. Limited stock available!</p>
         <span class="text-2xl font-bold absolute top-4 right-4">$99.50</span>
        <button class="mt-4 px-4 py-2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 font-bold border-2 border-gray-900 dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
      </div>
    </div>
  </div>
</div>