Eコマースコンポーネントコンポーネント
マイクロインタラクション、類似の配色、ダークテーマのサポートを備えたレスポンシブな e コマースコンポーネント。
HTMLコード
<div class="container mx-auto p-4 dark:bg-gray-800">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Product 1 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden transform transition duration-500 hover:scale-105 dark:bg-gray-700">
<img src="https://picsum.photos/600/400" alt="Product Image" class="w-full h-64 object-cover">
<div class="p-4">
<h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-white">Product Title</h3>
<p class="text-gray-600 text-sm mb-4 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-2xl font-bold text-blue-600 dark:text-blue-400">$99.99</span>
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition duration-300 dark:bg-blue-700 dark:hover:bg-blue-600">Add to Cart</button>
</div>
</div>
</div>
<!-- Product 2 (similar structure) -->
<div class="bg-white rounded-lg shadow-md overflow-hidden transform transition duration-500 hover:scale-105 dark:bg-gray-700">
<img src="https://picsum.photos/600/400" alt="Product Image" class="w-full h-64 object-cover">
<div class="p-4">
<h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-white">Product Title</h3>
<p class="text-gray-600 text-sm mb-4 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-2xl font-bold text-blue-600 dark:text-blue-400">$99.99</span>
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition duration-300 dark:bg-blue-700 dark:hover:bg-blue-600">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>関連コンポーネント
Eコマースコンポーネントコンポーネント
ブログ用のブルータリズムのeコマースコンポーネントで、鮮やかな配色と適度な複雑さが特徴です。これには、Tailwind CSSを使用したダークテーマをサポートするレスポンシブデザインが含まれています。