ショッピングカートコンポーネント
スキューモーフィズムでデザインされたショッピングカートコンポーネント。現実世界の対応物を模倣するデジタル要素、完全なレスポンシブサポート、ダークテーマの互換性を備えています。
HTMLコード
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto mt-10 p-5">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-5">Shopping Cart</h2>
<div class="mb-4">
<div class="flex items-center justify-between p-3 bg-gray-100 dark:bg-gray-700 rounded">
<img src="https://picsum.photos/50?random=1" alt="Product Image" class="w-16 h-16 rounded shadow-md">
<div class="flex-1 ml-3">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</h3>
<p class="text-gray-600 dark:text-gray-400">$29.99</p>
</div>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Remove</button>
</div>
</div>
<div class="mb-4">
<div class="flex items-center justify-between p-3 bg-gray-100 dark:bg-gray-700 rounded">
<img src="https://picsum.photos/50?random=2" alt="Product Image" class="w-16 h-16 rounded shadow-md">
<div class="flex-1 ml-3">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Another Product</h3>
<p class="text-gray-600 dark:text-gray-400">$19.99</p>
</div>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Remove</button>
</div>
</div>
<div class="flex justify-between font-bold text-lg mt-5">
<span class="text-gray-800 dark:text-white">Total:</span>
<span class="text-gray-800 dark:text-white">$49.98</span>
</div>
<button class="mt-5 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded w-full">Checkout</button>
</div>関連コンポーネント
ショッピングカートコンポーネント
電子商取引用のニューモーフィックスタイルのショッピングカートコンポーネントで、単色の配色、豊富なインタラクティブ要素、Tailwind CSSを使用したダークテーマのサポートが特徴です。
ショッピングカートコンポーネント
Glassmorphismエフェクトでデザインされたショッピングカートコンポーネントで、補色の配色を利用し、ダークモード用に最適化されています。ポートフォリオの使用、作品や製品の展示に最適です。