CCHub Logo CCHub Tailwind Collection
コンポーネント ショッピングカート ショッピングカートコンポーネント

ショッピングカートコンポーネント

eコマース用のシンプルなショッピングカートコンポーネントで、レスポンシブなマテリアルデザインの外観、補色の配色、ダークテーマのサポートを備えています。

プレビュー

HTMLコード 

<div class="container mx-auto p-4 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6">
    <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">Shopping Cart</h2>

    <!-- Cart Item 1 -->
    <div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
      <img class="w-20 h-20 object-cover rounded-md mr-4" src="https://picsum.photos/seed/item1/200/200" alt="Product Image">
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 1</h3>
        <p class="text-gray-600 dark:text-gray-400">Category</p>
        <div class="flex items-center mt-2">
          <span class="text-xl font-bold text-gray-800 dark:text-gray-200">$29.99</span>
          <span class="ml-4 text-gray-500 dark:text-gray-400">Qty: 1</span>
        </div>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Cart Item 2 -->
    <div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
      <img class="w-20 h-20 object-cover rounded-md mr-4" src="https://picsum.photos/seed/item2/200/200" alt="Product Image">
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 2</h3>
        <p class="text-gray-600 dark:text-gray-400">Category</p>
        <div class="flex items-center mt-2">
          <span class="text-xl font-bold text-gray-800 dark:text-gray-200">$49.99</span>
          <span class="ml-4 text-gray-500 dark:text-gray-400">Qty: 1</span>
        </div>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Cart Summary -->
    <div class="flex justify-between items-center mt-6">
      <span class="text-xl font-bold text-gray-800 dark:text-gray-200">Total:</span>
      <span class="text-2xl font-bold text-blue-600 dark:text-blue-400">$79.98</span>
    </div>

    <button class="mt-8 w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-md shadow-md dark:bg-blue-500 dark:hover:bg-blue-600">
      Proceed to Checkout
    </button>
  </div>
</div>

関連コンポーネント

ショッピングカートコンポーネント

レトロ/ビンテージをテーマにしたショッピングカートコンポーネントで、単色の配色、適度な複雑さ、レスポンシブデザイン、ダークモードのサポートを備えています。ビジネス/企業のWebサイトに適しています。

開ける

ショッピングカートコンポーネント

Tailwind CSSを使用したシンプルでミニマリストのショッピングカートコンポーネントで、アースカラーの配色、ソーシャルメディアの目的、ダークテーマのサポートを備えています。レスポンシブで、サンプルアイテムが含まれています。このコンポーネントは、最小限の要素で JavaScript を使用しない基本的な表示用に設計されています。

開ける

ショッピングカートコンポーネント - 水彩/アーティスティックセピア

セピア/ブラウンの色調を使用した水彩画/芸術的なスタイルのシンプルで応答性の高いショッピングカートコンポーネントで、製造/工業企業に適しています。ダークモードのサポートが含まれています。

開ける