製品カードコンポーネント
マテリアル デザインの原則と Tailwind CSS を使用して設計されたレスポンシブ プロダクト カード コンポーネント。ダークモードをサポートし、シャドウとグリッドベースのレイアウトを備えています。
HTMLコード
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg">
<h2 class="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Product Cards</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/150?random=1" alt="Product Image" class="w-full h-32 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 1</h3>
<p class="text-gray-600 dark:text-gray-400">$29.99</p>
<p class="text-gray-700 dark:text-gray-300 mt-2">A brief description of the product goes here.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/150?random=2" alt="Product Image" class="w-full h-32 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 2</h3>
<p class="text-gray-600 dark:text-gray-400">$39.99</p>
<p class="text-gray-700 dark:text-gray-300 mt-2">A brief description of the product goes here.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/150?random=3" alt="Product Image" class="w-full h-32 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 3</h3>
<p class="text-gray-600 dark:text-gray-400">$49.99</p>
<p class="text-gray-700 dark:text-gray-300 mt-2">A brief description of the product goes here.</p>
</div>
</div>
</div>
</div>