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

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

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

プレビュー

HTMLコード 

<!-- 3D Shopping Cart Component with Triadic Color Scheme -->
<div class="w-full max-w-4xl mx-auto bg-white dark:bg-gray-900 rounded-xl overflow-hidden shadow-2xl transform transition-all duration-300 hover:scale-[1.02] perspective-1000">
  <!-- Cart Header with 3D Effect -->
  <div class="relative bg-blue-600 dark:bg-blue-800 text-white p-6 transform hover:skew-x-1 transition-transform duration-200">
    <div class="flex justify-between items-center">
      <h2 class="text-2xl font-bold transform translate-z-4 relative z-10">Shopping Cart</h2>
      <span class="bg-amber-500 dark:bg-amber-600 px-4 py-2 rounded-full font-bold shadow-lg transform hover:-translate-y-1 hover:shadow-xl transition-all duration-300">4 Items</span>
    </div>
    <!-- Decorative 3D Elements -->
    <div class="absolute -bottom-3 left-0 w-full h-3 bg-blue-700 dark:bg-blue-900 skew-x-2 transform-gpu"></div>
  </div>

  <!-- Cart Items Container -->
  <div class="divide-y divide-gray-200 dark:divide-gray-700">
    <!-- Product 1 -->
    <div class="p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-200 transform hover:-translate-y-1">
      <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
        <!-- Product Image with 3D Effect -->
        <div class="relative w-24 h-24 sm:w-28 sm:h-28 flex-shrink-0">
          <img src="https://picsum.photos/seed/prod1/200/200" alt="Product" class="w-full h-full object-cover rounded-lg shadow-md transform transition-all duration-300 hover:rotate-2 hover:scale-110 z-10" />
          <div class="absolute inset-0 bg-amber-500 dark:bg-amber-600 opacity-30 rounded-lg transform translate-x-1 translate-y-1 -z-10"></div>
        </div>
        
        <!-- Product Details -->
        <div class="flex-grow space-y-2">
          <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start">
            <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">Premium Headphones</h3>
            <div class="text-lg font-bold text-red-600 dark:text-red-400">$129.99</div>
          </div>
          <p class="text-sm text-gray-600 dark:text-gray-300">Noise-cancelling wireless headphones with premium sound quality</p>
          
          <!-- Interactive Elements -->
          <div class="flex flex-wrap gap-4 mt-3 items-center">
            <!-- Quantity Selector with 3D effect -->
            <div class="flex items-center space-x-1 bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden shadow-inner p-1">
              <button class="w-8 h-8 flex items-center justify-center bg-blue-600 dark:bg-blue-700 text-white rounded-md transform transition-transform hover:scale-105 active:scale-95">-</button>
              <span class="w-8 text-center font-medium text-gray-800 dark:text-gray-200">1</span>
              <button class="w-8 h-8 flex items-center justify-center bg-blue-600 dark:bg-blue-700 text-white rounded-md transform transition-transform hover:scale-105 active:scale-95">+</button>
            </div>
            
            <!-- Save and Remove Buttons -->
            <button class="text-amber-600 dark:text-amber-400 font-medium hover:underline transform hover:translate-y-[-2px] transition-all">Save for Later</button>
            <button class="text-red-600 dark:text-red-400 font-medium hover:underline transform hover:translate-y-[-2px] transition-all">Remove</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Product 2 -->
    <div class="p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-200 transform hover:-translate-y-1">
      <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
        <!-- Product Image with 3D Effect -->
        <div class="relative w-24 h-24 sm:w-28 sm:h-28 flex-shrink-0">
          <img src="https://picsum.photos/seed/prod2/200/200" alt="Product" class="w-full h-full object-cover rounded-lg shadow-md transform transition-all duration-300 hover:rotate-2 hover:scale-110 z-10" />
          <div class="absolute inset-0 bg-red-500 dark:bg-red-600 opacity-30 rounded-lg transform translate-x-1 translate-y-1 -z-10"></div>
        </div>
        
        <!-- Product Details -->
        <div class="flex-grow space-y-2">
          <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start">
            <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">Smart Watch Pro</h3>
            <div class="text-lg font-bold text-red-600 dark:text-red-400">$249.99</div>
          </div>
          <p class="text-sm text-gray-600 dark:text-gray-300">Fitness tracker with heart rate monitor and GPS</p>
          
          <!-- Interactive Elements -->
          <div class="flex flex-wrap gap-4 mt-3 items-center">
            <!-- Quantity Selector with 3D effect -->
            <div class="flex items-center space-x-1 bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden shadow-inner p-1">
              <button class="w-8 h-8 flex items-center justify-center bg-blue-600 dark:bg-blue-700 text-white rounded-md transform transition-transform hover:scale-105 active:scale-95">-</button>
              <span class="w-8 text-center font-medium text-gray-800 dark:text-gray-200">2</span>
              <button class="w-8 h-8 flex items-center justify-center bg-blue-600 dark:bg-blue-700 text-white rounded-md transform transition-transform hover:scale-105 active:scale-95">+</button>
            </div>
            
            <!-- Save and Remove Buttons -->
            <button class="text-amber-600 dark:text-amber-400 font-medium hover:underline transform hover:translate-y-[-2px] transition-all">Save for Later</button>
            <button class="text-red-600 dark:text-red-400 font-medium hover:underline transform hover:translate-y-[-2px] transition-all">Remove</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Product 3 -->
    <div class="p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-200 transform hover:-translate-y-1">
      <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
        <!-- Product Image with 3D Effect -->
        <div class="relative w-24 h-24 sm:w-28 sm:h-28 flex-shrink-0">
          <img src="https://picsum.photos/seed/prod3/200/200" alt="Product" class="w-full h-full object-cover rounded-lg shadow-md transform transition-all duration-300 hover:rotate-2 hover:scale-110 z-10" />
          <div class="absolute inset-0 bg-blue-500 dark:bg-blue-600 opacity-30 rounded-lg transform translate-x-1 translate-y-1 -z-10"></div>
        </div>
        
        <!-- Product Details -->
        <div class="flex-grow space-y-2">
          <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start">
            <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">Digital Camera</h3>
            <div class="text-lg font-bold text-red-600 dark:text-red-400">$349.99</div>
          </div>
          <p class="text-sm text-gray-600 dark:text-gray-300">20MP digital camera with 4K video recording and image stabilization</p>
          
          <!-- Interactive Elements -->
          <div class="flex flex-wrap gap-4 mt-3 items-center">
            <!-- Quantity Selector with 3D effect -->
            <div class="flex items-center space-x-1 bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden shadow-inner p-1">
              <button class="w-8 h-8 flex items-center justify-center bg-blue-600 dark:bg-blue-700 text-white rounded-md transform transition-transform hover:scale-105 active:scale-95">-</button>
              <span class="w-8 text-center font-medium text-gray-800 dark:text-gray-200">1</span>
              <button class="w-8 h-8 flex items-center justify-center bg-blue-600 dark:bg-blue-700 text-white rounded-md transform transition-transform hover:scale-105 active:scale-95">+</button>
            </div>
            
            <!-- Save and Remove Buttons -->
            <button class="text-amber-600 dark:text-amber-400 font-medium hover:underline transform hover:translate-y-[-2px] transition-all">Save for Later</button>
            <button class="text-red-600 dark:text-red-400 font-medium hover:underline transform hover:translate-y-[-2px] transition-all">Remove</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Cart Summary with 3D Effect -->
  <div class="relative bg-gray-50 dark:bg-gray-800 p-6 transform hover:skew-x-1 transition-transform duration-300">
    <!-- Decorative 3D Element -->
    <div class="absolute -top-3 left-0 w-full h-3 bg-gray-200 dark:bg-gray-700 skew-x-2 transform-gpu"></div>
    
    <div class="space-y-4">
      <!-- Pricing Summary -->
      <div class="space-y-2">
        <div class="flex justify-between text-gray-600 dark:text-gray-300">
          <span>Subtotal</span>
          <span>$729.97</span>
        </div>
        <div class="flex justify-between text-gray-600 dark:text-gray-300">
          <span>Shipping</span>
          <span>$9.99</span>
        </div>
        <div class="flex justify-between text-gray-600 dark:text-gray-300">
          <span>Tax</span>
          <span>$58.40</span>
        </div>
        <div class="h-px bg-gray-200 dark:bg-gray-700 my-2"></div>
        <div class="flex justify-between font-bold text-lg text-gray-900 dark:text-white">
          <span>Total</span>
          <span>$798.36</span>
        </div>
      </div>
      
      <!-- Promo Code Input -->
      <div class="flex flex-wrap gap-2">
        <input type="text" placeholder="Promo code" class="flex-grow px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent shadow-sm transform transition-all duration-200 focus:scale-[1.02]" />
        <button class="px-4 py-2 bg-amber-500 dark:bg-amber-600 text-white font-medium rounded-lg shadow-md transform transition-all duration-200 hover:scale-105 hover:shadow-lg active:scale-95">Apply</button>
      </div>
      
      <!-- Checkout Button with 3D Effect -->
      <button class="relative w-full py-3 bg-red-600 dark:bg-red-700 text-white text-lg font-bold rounded-lg shadow-lg transform transition-all duration-300 hover:translate-y-[-2px] hover:shadow-xl active:translate-y-0 active:shadow-md overflow-hidden">
        <div class="absolute inset-0 flex items-center justify-center">
          <span class="transform transition-transform group-hover:translate-z-4">Checkout</span>
        </div>
        <div class="absolute bottom-0 left-0 w-full h-1 bg-red-800 dark:bg-red-900"></div>
      </button>
      
      <!-- Continue Shopping Link -->
      <div class="text-center">
        <a href="#" class="inline-flex items-center text-blue-600 dark:text-blue-400 font-medium hover:underline transform transition-all duration-200 hover:translate-y-[-2px]">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
          </svg>
          Continue Reading
        </a>
      </div>
    </div>
  </div>
  
  <!-- Recently Viewed Section -->
  <div class="p-6 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
    <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100 mb-4">Recently Viewed</h3>
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
      <!-- Item 1 -->
      <div class="group relative overflow-hidden rounded-lg shadow-md transform transition-all duration-300 hover:scale-105 hover:rotate-1 hover:shadow-xl">
        <img src="https://picsum.photos/seed/recent1/200/200" alt="Recent item" class="w-full h-24 object-cover" />
        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
          <div class="absolute bottom-2 left-2 text-white text-sm font-medium">Wireless Earbuds</div>
        </div>
      </div>
      
      <!-- Item 2 -->
      <div class="group relative overflow-hidden rounded-lg shadow-md transform transition-all duration-300 hover:scale-105 hover:rotate-1 hover:shadow-xl">
        <img src="https://picsum.photos/seed/recent2/200/200" alt="Recent item" class="w-full h-24 object-cover" />
        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
          <div class="absolute bottom-2 left-2 text-white text-sm font-medium">Portable Speaker</div>
        </div>
      </div>
      
      <!-- Item 3 -->
      <div class="group relative overflow-hidden rounded-lg shadow-md transform transition-all duration-300 hover:scale-105 hover:rotate-1 hover:shadow-xl">
        <img src="https://picsum.photos/seed/recent3/200/200" alt="Recent item" class="w-full h-24 object-cover" />
        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
          <div class="absolute bottom-2 left-2 text-white text-sm font-medium">Smart Light Bulb</div>
        </div>
      </div>
      
      <!-- Item 4 -->
      <div class="group relative overflow-hidden rounded-lg shadow-md transform transition-all duration-300 hover:scale-105 hover:rotate-1 hover:shadow-xl">
        <img src="https://picsum.photos/seed/recent4/200/200" alt="Recent item" class="w-full h-24 object-cover" />
        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
          <div class="absolute bottom-2 left-2 text-white text-sm font-medium">Tablet Stand</div>
        </div>
      </div>
    </div>
  </div>
</div>

関連コンポーネント

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

グレースケールの配色、適度な複雑さ、ダークテーマをサポートするレスポンシブデザインを備えたレトロ/ビンテージスタイルのショッピングカートコンポーネント。Tailwind CSSを使用するビジネス/企業のWebサイト向けに設計されています。JavaScriptはなく、Tailwindクラスを含むHTMLのみ。画像にはpicsum.photosを使用し、アバターには randomuser.me を使用します。

開ける

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

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

開ける

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

スキューモーフィズムでデザインされたショッピングカートコンポーネント。現実世界の対応物を模倣するデジタル要素、完全なレスポンシブサポート、ダークテーマの互換性を備えています。

開ける