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

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

ダークテーマをサポートするシンプルでレスポンシブなショッピングカートコンポーネントで、マテリアルデザインの原則に従ってTailwind CSSを使用してスタイル設定され、グレースケールの配色が施されています。商品画像にはpicsum.photosを使用します。

プレビュー

HTMLコード 

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

    <!-- Cart Item 1 -->
    <div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
      <img class="w-24 h-24 object-cover rounded-lg mr-4" src="https://picsum.photos/seed/product1/200/200" alt="Product Image">
      <div class="flex-grow">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 1</h2>
        <p class="text-gray-600 dark:text-gray-400">Category: Electronics</p>
        <p class="text-gray-800 dark:text-white font-bold">$299.99</p>
      </div>
      <div class="text-gray-600 dark:text-gray-400">
        Quantity: 1
      </div>
    </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-24 h-24 object-cover rounded-lg mr-4" src="https://picsum.photos/seed/product2/200/200" alt="Product Image">
      <div class="flex-grow">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 2</h2>
        <p class="text-gray-600 dark:text-gray-400">Category: Books</p>
        <p class="text-gray-800 dark:text-white font-bold">$19.50</p>
      </div>
      <div class="text-gray-600 dark:text-gray-400">
        Quantity: 2
      </div>
    </div>

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

    <div class="mt-6 flex justify-end">
      <button class="px-6 py-3 bg-gray-800 text-white dark:bg-gray-200 dark:text-gray-800 rounded-lg shadow-md hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">
        Checkout
      </button>
    </div>
  </div>
</div>

関連コンポーネント

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

Neumorphismデザインとダークテーマをサポートするための補色スキームを備えたシンプルなレスポンシブショッピングカートコンポーネント。

開ける

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

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

開ける

ニューモルフィックショッピングカート

トライアド配色を使用したニューモーフィックショッピングカートコンポーネント。適度な複雑さがあり、ビジネス/企業のWebサイト向けに設計されています。このコンポーネントはレスポンシブで、Tailwind の dark: プレフィックスを使用したダーク モードのサポートが含まれています。数量と価格、小計、チェックアウトボタンを含むアイテムのプレースホルダーが含まれます。商品画像にはpicsum.photosを使用します。

開ける