ショッピングカートコンポーネント
レトロ/ビンテージ デザイン、補色配色、ダーク モードのサポートを備えたシンプルでレスポンシブなショッピング カート コンポーネントで、Tailwind CSS を使用して構築されています。
HTMLコード
<div class="container mx-auto p-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Shopping Cart</h2>
<div class="space-y-4">
<!-- Cart Item -->
<div class="flex justify-between items-center border-b pb-4 border-gray-200 dark:border-gray-700">
<div class="flex items-center">
<img class="w-16 h-16 object-cover rounded mr-4 filter sepia" src="https://picsum.photos/seed/retro1/100/100" alt="Product Image">
<div>
<h3 class="text-gray-800 dark:text-white font-medium">Retro T-Shirt</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm">Size: L</p>
</div>
</div>
<div class="text-gray-700 dark:text-gray-200 font-semibold">$29.99</div>
</div>
<!-- Cart Item -->
<div class="flex justify-between items-center border-b pb-4 border-gray-200 dark:border-gray-700">
<div class="flex items-center">
<img class="w-16 h-16 object-cover rounded mr-4 filter sepia" src="https://picsum.photos/seed/retro2/100/100" alt="Product Image">
<div>
<h3 class="text-gray-800 dark:text-white font-medium">Vintage Jeans</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm">Size: 32</p>
</div>
</div>
<div class="text-gray-700 dark:text-gray-200 font-semibold">$59.99</div>
</div>
</div>
<div class="flex justify-between items-center mt-6">
<div class="text-xl font-bold text-gray-800 dark:text-white">Total:</div>
<div class="text-xl font-bold text-gray-800 dark:text-white">$89.98</div>
</div>
<button class="mt-6 w-full bg-rose-500 hover:bg-rose-600 text-white font-bold py-2 px-4 rounded dark:bg-teal-500 dark:hover:bg-teal-600 filter sepia">Checkout</button>
</div>
</div>
関連コンポーネント
ショッピングカートコンポーネント
マテリアルデザイン、単色の配色、およびEコマース向けの適度な複雑さを備えたショッピングカートコンポーネント。Tailwind CSSを使用したダークテーマをサポートするレスポンシブデザイン。
ショッピングカートコンポーネント
Glassmorphismエフェクトでデザインされたショッピングカートコンポーネントで、補色の配色を利用し、ダークモード用に最適化されています。ポートフォリオの使用、作品や製品の展示に最適です。
3Dショッピングカートコンポーネント
奥行きとエンゲージメントを生み出す3Dデザイン要素を備えた、視覚的に印象的なショッピングカートコンポーネント。トライアドカラースキーム(プライマリーブルー、ビビッドレッド、アンバーイエロー)を使用して、視覚的な興味を引かせます。この複雑なインターフェースには、画像付きの商品リスト、数量管理、価格概要、3Dの動きをシミュレートするホバー効果が含まれています。ダークテーマのサポートにより完全にレスポンシブ。このコンポーネントは、読者がコンテンツを消費しながら推奨製品を購入できるコンテンツ/ブログ環境向けに設計されています。