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

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

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

プレビュー

HTMLコード 

<div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800 shadow-md rounded-lg">
  <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Shopping Cart</h1>
  <div class="space-y-4">
    <!-- Cart Item 1 -->
    <div class="flex items-center border-b border-gray-300 dark:border-gray-700 pb-4">
      <img src="https://picsum.photos/seed/item1/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded">
      <div class="ml-4 flex-grow">
        <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 1</h2>
        <p class="text-gray-600 dark:text-gray-400">Quantity: 1</p>
        <p class="text-gray-800 dark:text-white font-bold">$19.99</p>
      </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-300 dark:border-gray-700 pb-4">
      <img src="https://picsum.photos/seed/item2/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded">
      <div class="ml-4 flex-grow">
        <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 2</h2>
        <p class="text-gray-600 dark:text-gray-400">Quantity: 2</p>
        <p class="text-gray-800 dark:text-white font-bold">$39.98</p>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Cart Item 3 -->
    <div class="flex items-center border-b border-gray-300 dark:border-gray-700 pb-4">
      <img src="https://picsum.photos/seed/item3/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded">
      <div class="ml-4 flex-grow">
        <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 3</h2>
        <p class="text-gray-600 dark:text-gray-400">Quantity: 1</p>
        <p class="text-gray-800 dark:text-white font-bold">$9.50</p>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>
  </div>

  <!-- Cart Summary -->
  <div class="mt-6 flex justify-between items-center">
    <span class="text-xl font-bold text-gray-800 dark:text-white">Total:</span>
    <span class="text-xl font-bold text-gray-800 dark:text-white">$69.47</span>
  </div>

  <button class="mt-6 w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded dark:bg-green-700 dark:hover:bg-green-800">
    Checkout
  </button>
</div>

関連コンポーネント

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

ファッションおよび美容製品用に設計された、複雑でクリーンで信頼できるショッピングカートコンポーネントで、豊かな秋の色、完全な応答性、ダークモードのサポートが特徴です。

開ける

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

マイクロインタラクションスタイル、レスポンシブエフェクト、ダークテーマのサポートを備えたショッピングカートコンポーネント。

開ける

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

レスポンシブデザインのシンプルなダークモードショッピングカートコンポーネントで、商品リスト、数量、合計が特徴です。暗い背景のトライアドカラースキームを使用しています。コンテンツ消費のために設計されています。

開ける