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>

関連コンポーネント

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

Tailwind CSSを使用してNeumorphismスタイルで設計されたレスポンシブショッピングカートコンポーネントで、ダークテーマをサポートするソーシャルメディアインターフェイスに適しています。

開ける

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

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

開ける

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

ソーシャルメディアインターフェース用に最適化されたショッピングカートコンポーネントで、マイクロインタラクション、鮮やかな色、シンプルなレイアウトが特徴です。レスポンシブデザインとダークモードのサポートが含まれています。

開ける