製品ギャラリーコンポーネント
マテリアルデザインの原則に基づく製品ギャラリーコンポーネントで、レスポンシブデザインとダークテーマのサポートが特徴です。プレースホルダー画像が含まれています。
HTMLコード
<div class="container mx-auto p-4">
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<!-- Product Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img src="https://picsum.photos/seed/product1/500/300" alt="Product Image 1" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-gray-900 dark:text-white font-semibold text-lg mb-2">Product Title 1</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-gray-900 dark:text-white font-bold text-xl">$19.99</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img src="https://picsum.photos/seed/product2/500/300" alt="Product Image 2" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-gray-900 dark:text-white font-semibold text-lg mb-2">Product Title 2</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-gray-900 dark:text-white font-bold text-xl">$29.99</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img src="https://picsum.photos/seed/product3/500/300" alt="Product Image 3" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-gray-900 dark:text-white font-semibold text-lg mb-2">Product Title 3</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-gray-900 dark:text-white font-bold text-xl">$39.99</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img src="https://picsum.photos/seed/product4/500/300" alt="Product Image 4" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-gray-900 dark:text-white font-semibold text-lg mb-2">Product Title 4</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-gray-900 dark:text-white font-bold text-xl">$49.99</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>関連コンポーネント
製品ギャラリーコンポーネント
レトロ/ビンテージの美学を備えたレスポンシブな製品ギャラリーで、ダークモードのサポートが特徴です。これには、プレースホルダーサービスから生成された画像とアバターが含まれます。
製品ギャラリーコンポーネント
Tailwind CSS で構築された、スキューモーフィック デザイン、単色の配色、ダーク テーマのサポートを備えたレスポンシブ製品ギャラリー コンポーネント。ブログやコンテンツの消費に適したシンプルなレイアウトが特徴で、微妙な影やグラデーションで現実世界の要素を模倣しています。