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

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

電子商取引用のニューモーフィックスタイルのショッピングカートコンポーネントで、単色の配色、豊富なインタラクティブ要素、Tailwind CSSを使用したダークテーマのサポートが特徴です。

プレビュー

HTMLコード 

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-6">
  <div class="bg-white dark:bg-gray-800 shadow-inner rounded-xl p-8 max-w-md w-full">
    <h2 class="text-gray-800 dark:text-white text-2xl font-semibold mb-6 text-center">Shopping Cart</h2>
    <div class="space-y-4">
      <div class="flex items-center justify-between bg-gray-200 dark:bg-gray-700 rounded-lg p-4">
        <img src="https://picsum.photos/60/60" alt="Product" class="rounded-md shadow-md">
        <div class="flex-1 ml-4">
          <h3 class="text-gray-800 dark:text-white font-medium">Product Title</h3>
          <p class="text-gray-600 dark:text-gray-400">$29.99</p>
        </div>
        <div class="flex items-center">
          <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">-</button>
          <span class="mx-2">1</span>
          <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">+</button>
        </div>
      </div>
      <div class="flex items-center justify-between bg-gray-200 dark:bg-gray-700 rounded-lg p-4">
        <img src="https://picsum.photos/60/60" alt="Product" class="rounded-md shadow-md">
        <div class="flex-1 ml-4">
          <h3 class="text-gray-800 dark:text-white font-medium">Another Product</h3>
          <p class="text-gray-600 dark:text-gray-400">$19.99</p>
        </div>
        <div class="flex items-center">
          <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">-</button>
          <span class="mx-2">2</span>
          <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">+</button>
        </div>
      </div>
    </div>
    <div class="mt-6 bg-gray-300 dark:bg-gray-600 rounded-lg p-4 flex justify-between items-center">
      <span class="text-gray-800 dark:text-white font-bold">Total:</span>
      <span class="text-lg text-gray-800 dark:text-white font-semibold">$69.97</span>
    </div>
    <div class="mt-4 flex justify-center">
      <button class="bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg shadow">
        Checkout
      </button>
    </div>
  </div>
</div>

関連コンポーネント

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

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

開ける

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

ダークモードのサポートとレスポンシブデザインを備えたブルータリズムのショッピングカートコンポーネント。

開ける

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

奥行きとエンゲージメントを生み出す3Dデザイン要素を備えた、視覚的に印象的なショッピングカートコンポーネント。トライアドカラースキーム(プライマリーブルー、ビビッドレッド、アンバーイエロー)を使用して、視覚的な興味を引かせます。この複雑なインターフェースには、画像付きの商品リスト、数量管理、価格概要、3Dの動きをシミュレートするホバー効果が含まれています。ダークテーマのサポートにより完全にレスポンシブ。このコンポーネントは、読者がコンテンツを消費しながら推奨製品を購入できるコンテンツ/ブログ環境向けに設計されています。

開ける