インタラクティブコンポーネントコンポーネント
マテリアルデザイン、トライアドカラースキーム、複雑な複雑さ、Eコマース向け、レスポンシブデザインとダークテーマのサポートを備えたインタラクティブコンポーネントコンポーネント。
HTMLコード
<div class="bg-gray-100 dark:bg-gray-900 p-4">
<div class="container mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Product Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 1</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">Short product description goes here. It can span a couple of lines.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-blue-600 dark:text-blue-400">$199.99</span>
<button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 dark:bg-blue-400 dark:hover:bg-blue-500">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 2</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">Another short product description for variety and demonstration.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-red-600 dark:text-red-400">$249.50</span>
<button class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 dark:bg-red-400 dark:hover:bg-red-500">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 3</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">Yet another product description to fill the card space.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-green-600 dark:text-green-400">$145.00</span>
<button class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 dark:bg-green-400 dark:hover:bg-green-500">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
</div>関連コンポーネント
インタラクティブコンポーネントコンポーネント
Glassmorphism デザイン、パステル調の配色、ブログコンテンツ用のシンプルなレイアウトを備えたインタラクティブなコンポーネントです。応答性が高く、ダークモードのサポートが含まれています。
インタラクティブポートフォリオコンポーネント
マイクロインタラクションとパステルカラースキームを備えたレスポンシブポートフォリオコンポーネントで、Tailwind CSSによるダークモードをサポートします。