搜索组件

类别

组件购物车

购物车

收集购买商品的电子商务功能

购物车组件

一个复杂的响应式购物车组件，具有灰度配色方案，专为博客/内容目的而设计。具有使用 Tailwind CSS 的微交互功能，支持深色模式，无需 JavaScript。

                <div class="container mx-auto p-4 dark:bg-gray-900">
  <h1 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Shopping Cart</h1>

  </div>

购物车组件

具有 Material Design、单色配色方案和中等复杂性的购物车组件，适用于电子商务。使用 Tailwind CSS 的响应式设计，支持深色主题。

打开预览

                <div class="container mx-auto p-4 bg-gray-lightest dark:bg-gray-dark">
  <h1 class="text-2xl font-bold mb-4 text-gray-darkest dark:text-gray-lightest">Shopping Cart</h1>

  <div class="shadow-md rounded-lg overflow-hidden">
    <!-- Cart Item -->
    <div class="flex items-center p-4 bg-white dark:bg-gray-darker border-b border-gray-200 dark:border-gray-700">
      <img src="https://picsum.photos/seed/item1/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded-md">
      <div class="ml-4 flex-grow">
        <h2 class="text-lg font-semibold text-gray-darkest dark:text-gray-lightest">Product Name 1</h2>
        <p class="text-gray-dark dark:text-gray-light">Price: $19.99</p>
        <div class="flex items-center mt-2">
          <label for="quantity1" class="mr-2 text-gray-dark dark:text-gray-light">Quantity:</label>
          <input type="number" id="quantity1" name="quantity1" value="1" min="1" class="w-16 px-2 py-1 border rounded dark:bg-gray-darkest dark:text-gray-lightest">
        </div>
      </div>
      <button class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Cart Item -->
    <div class="flex items-center p-4 bg-white dark:bg-gray-darker border-b border-gray-200 dark:border-gray-700">
      <img src="https://picsum.photos/seed/item2/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded-md">
      <div class="ml-4 flex-grow">
        <h2 class="text-lg font-semibold text-gray-darkest dark:text-gray-lightest">Product Name 2</h2>
        <p class="text-gray-dark dark:text-gray-light">Price: $29.99</p>
        <div class="flex items-center mt-2">
          <label for="quantity2" class="mr-2 text-gray-dark dark:text-gray-light">Quantity:</label>
          <input type="number" id="quantity2" name="quantity2" value="2" min="1" class="w-16 px-2 py-1 border rounded dark:bg-gray-darkest dark:text-gray-lightest">
        </div>
      </div>
      <button class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Total -->
    <div class="flex justify-between items-center p-4 bg-white dark:bg-gray-darker">
      <span class="text-lg font-semibold text-gray-darkest dark:text-gray-lightest">Total:</span>
      <span class="text-lg font-bold text-gray-darkest dark:text-gray-lightest">$79.97</span>
    </div>
  </div>

  <!-- Checkout Button -->
  <div class="mt-4 text-right">
    <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded dark:bg-blue-800 dark:hover:bg-blue-900">
      Checkout
    </button>
  </div>
</div>

购物车组件

一个复杂的响应式购物车组件，具有微交互和相似色彩，适用于社交媒体，支持使用Tailwind CSS的深色模式。

打开预览

                <div class="container mx-auto p-4 lg:p-8 dark:bg-gray-900">
    <h1 class="text-2xl font-bold mb-6 dark:text-white">Shopping Cart</h1>
    
    <div class="flex flex-col lg:flex-row gap-6">
        <!-- Cart Items -->
        <div class="lg:w-2/3">
            <!-- Item 1 -->
            <div class="flex items-center border-b pb-4 mb-4 animate-fadeIn dark:border-gray-700">
                <img src="https://picsum.photos/seed/item1/100" alt="Product Image" class="w-16 h-16 object-cover rounded mr-4">
                <div class="flex-grow">
                    <h2 class="text-lg font-semibold dark:text-white">Awesome Product Name</h2>
                    <p class="text-gray-600 dark:text-gray-400">Color: Blue, Size: M</p>
                    <div class="flex items-center mt-2">
                        <span class="text-lg font-bold text-blue-600 dark:text-blue-400">$49.99</span>
                        <span class="text-sm text-gray-500 line-through ml-2 dark:text-gray-500">$59.99</span>
                    </div>
                </div>
                <div class="flex items-center">
                    <input type="number" value="1" min="1" class="w-16 px-2 py-1 border rounded text-center dark:bg-gray-800 dark:border-gray-700 dark:text-white">
                    <button class="ml-4 text-red-600 hover:text-red-800 transition duration-300 ease-in-out transform hover:scale-110">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                        </svg>
                    </button>
                </div>
            </div>
            
            <!-- Item 2 -->
             <div class="flex items-center border-b pb-4 mb-4 animate-fadeIn dark:border-gray-700">
                <img src="https://picsum.photos/seed/item2/100" alt="Product Image" class="w-16 h-16 object-cover rounded mr-4">
                <div class="flex-grow">
                    <h2 class="text-lg font-semibold dark:text-white">Another Great Product</h2>
                    <p class="text-gray-600 dark:text-gray-400">Color: Red, Size: L</p>
                     <div class="flex items-center mt-2">
                        <span class="text-lg font-bold text-green-600 dark:text-green-400">$29.99</span>
                    </div>
                </div>
                <div class="flex items-center">
                    <input type="number" value="2" min="1" class="w-16 px-2 py-1 border rounded text-center dark:bg-gray-800 dark:border-gray-700 dark:text-white">
                    <button class="ml-4 text-red-600 hover:text-red-800 transition duration-300 ease-in-out transform hover:scale-110">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Order Summary -->
        <div class="lg:w-1/3 bg-gray-100 p-6 rounded-lg dark:bg-gray-800 animate-slideInRight">
            <h2 class="text-xl font-bold mb-4 dark:text-white">Order Summary</h2>
            <div class="flex justify-between mb-2">
                <span class="dark:text-gray-300">Subtotal:</span>
                <span class="font-semibold dark:text-white">$109.97</span>
            </div>
             <div class="flex justify-between mb-2">
                <span class="dark:text-gray-300">Shipping:</span>
                <span class="font-semibold dark:text-white">$5.00</span>
            </div>
             <div class="flex justify-between mb-4">
                <span class="dark:text-gray-300">Tax:</span>
                <span class="font-semibold dark:text-white">$8.80</span>
            </div>
            <div class="flex justify-between font-bold text-lg mb-6 dark:text-white">
                <span>Total:</span>
                <span>$123.77</span>
            </div>
            <button class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition duration-300 ease-in-out transform hover:scale-105">
                Checkout
            </button>
        </div>
    </div>
</div>

<style>
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.animate-fadeIn {
    animation: fadeIn 0.5s ease-out;
}

.animate-slideInRight {
     animation: slideInRight 0.5s ease-out;
}
</style>

购物车组件

一个使用 Tailwind CSS 设计的 Neumorphism 风格的响应式购物车组件，适合支持深色主题的社交媒体界面。

打开预览

                <div class="container mx-auto p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Shopping Cart</h2>
        <div class="space-y-4">
            <!-- Cart Item 1 -->
            <div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-inner">
                <img src="https://picsum.photos/80?random=1" alt="Product Image" class="h-20 w-20 rounded-lg shadow-md">
                <div class="flex-1 mx-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 1</h3>
                    <p class="text-gray-600 dark:text-gray-400">$19.99</p>
                </div>
                <button class="text-red-500 font-semibold dark:text-red-300 hover:text-red-700 dark:hover:text-red-400">Remove</button>
            </div>
            
            <!-- Cart Item 2 -->
            <div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-inner">
                <img src="https://picsum.photos/80?random=2" alt="Product Image" class="h-20 w-20 rounded-lg shadow-md">
                <div class="flex-1 mx-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 2</h3>
                    <p class="text-gray-600 dark:text-gray-400">$29.99</p>
                </div>
                <button class="text-red-500 font-semibold dark:text-red-300 hover:text-red-700 dark:hover:text-red-400">Remove</button>
            </div>
            
            <!-- Cart Item 3 -->
            <div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-inner">
                <img src="https://picsum.photos/80?random=3" alt="Product Image" class="h-20 w-20 rounded-lg shadow-md">
                <div class="flex-1 mx-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 3</h3>
                    <p class="text-gray-600 dark:text-gray-400">$39.99</p>
                </div>
                <button class="text-red-500 font-semibold dark:text-red-300 hover:text-red-700 dark:hover:text-red-400">Remove</button>
            </div>
        </div>
        <div class="mt-6 border-t border-gray-300 dark:border-gray-600 pt-4">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Total: $89.97</h3>
            <button class="mt-4 w-full bg-blue-500 dark:bg-blue-700 text-white rounded-lg py-2 hover:bg-blue-600 dark:hover:bg-blue-600">Checkout</button>
        </div>
    </div>
</div>

购物车组件

一个简单的响应式购物车组件，模仿现实世界的设计，色彩鲜艳，适合电子商务。

打开预览

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Shopping Cart</h2>
    <ul class="mt-4 space-y-4">
        <li class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
            <img src="https://picsum.photos/50" alt="Product Image" class="w-12 h-12 rounded-md shadow-md">
            <div class="flex-1 ml-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name</h3>
                <p class="text-gray-600 dark:text-gray-400">$29.99</p>
            </div>
            <input type="number" value="1" min="1" class="w-16 border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 rounded-md text-center">
        </li>
        <li class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
            <img src="https://picsum.photos/50" alt="Product Image" class="w-12 h-12 rounded-md shadow-md">
            <div class="flex-1 ml-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Another Product</h3>
                <p class="text-gray-600 dark:text-gray-400">$49.99</p>
            </div>
            <input type="number" value="1" min="1" class="w-16 border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 rounded-md text-center">
        </li>
    </ul>
    <div class="mt-6">
        <button class="w-full py-3 text-lg font-semibold text-white bg-blue-500 rounded-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">
            Checkout
        </button>
    </div>
</div>

复古/古董购物车

购物车组件，采用复古/复古风格，柔和的色彩方案和简单的复杂性。采用响应式设计，支持深色主题，使用Tailwind CSS。

打开预览

                <div class="container mx-auto p-6 bg-gradient-to-br from-purple-300 to-pink-300 dark:from-purple-700 dark:to-pink-700 font-mono">
  <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
    <div class="px-6 py-4">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Your Cart</h2>
      
      <!-- Cart Item -->
      <div class="flex items-center mb-4">
        <img class="h-12 w-12 rounded-full object-cover mr-4" src="https://picsum.photos/seed/retro1/50/50" alt="Product Image">
        <div class="flex-grow">
          <p class="text-gray-700 dark:text-gray-300 font-semibold">Radical Sneakers</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">$89.99</p>
        </div>
        <span class="text-gray-700 dark:text-gray-300">x1</span>
      </div>
      
      <!-- Cart Item -->
      <div class="flex items-center mb-4">
        <img class="h-12 w-12 rounded-full object-cover mr-4" src="https://picsum.photos/seed/retro2/50/50" alt="Product Image">
        <div class="flex-grow">
          <p class="text-gray-700 dark:text-gray-300 font-semibold">Awesome Mixtape</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">$12.50</p>
        </div>
        <span class="text-gray-700 dark:text-gray-300">x2</span>
      </div>
      
      <!-- Total -->
      <div class="flex justify-between items-center border-t border-gray-300 dark:border-gray-600 pt-4 mt-4">
        <p class="text-xl font-bold text-gray-800 dark:text-white">Total:</p>
        <p class="text-xl font-bold text-gray-800 dark:text-white">$114.99</p>
      </div>
      
    </div>
    
    <div class="bg-gray-200 dark:bg-gray-700 px-6 py-4">
      <button class="block w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
        Checkout
      </button>
    </div>
    
  </div>
</div>

购物车组件

一个采用神经形态风格的电子商务购物车组件，具有单色配色方案、丰富的互动元素，并使用 Tailwind CSS 支持深色主题。

打开预览

                <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>

购物车组件

一个设计有玻璃态效果的购物车组件，采用互补色调，并为暗模式进行了优化。非常适合用于投资组合展示作品或产品。

打开预览

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800 p-4">
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg backdrop-blur-md bg-opacity-30 border border-gray-200 dark:border-gray-600 p-6 w-full max-w-md">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white text-center">Shopping Cart</h2>
        <div class="mt-4">
            <div class="flex items-center justify-between border-b pb-2 mb-2">
                <img src="https://picsum.photos/50/50" alt="Product Image" class="rounded-md" />
                <div class="flex-1 mx-2">
                    <h3 class="text-md font-medium text-gray-700 dark:text-gray-300">Product Name</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">$29.99</p>
                </div>
                <span class="text-gray-600 dark:text-gray-200">Quantity: 1</span>
            </div>
            <div class="flex items-center justify-between border-b pb-2 mb-2">
                <img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="rounded-md" />
                <div class="flex-1 mx-2">
                    <h3 class="text-md font-medium text-gray-700 dark:text-gray-300">Another Product</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">$19.99</p>
                </div>
                <span class="text-gray-600 dark:text-gray-200">Quantity: 2</span>
            </div>
        </div>
        <div class="flex items-center justify-between border-t pt-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Total:</h3>
            <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$69.97</span>
        </div>
        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">Checkout</button>
    </div>
</div>

购物车组件

一个简单的响应式购物车组件，采用新拟态设计，为深色主题提供互补的配色方案。

打开预览

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg">  <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Shopping Cart</h2>  <ul class="space-y-4">    <li class="flex items-center border p-4 rounded-lg bg-white shadow-inner dark:bg-gray-600">      <img src="https://picsum.photos/50/50" alt="Product Image" class="mr-4 rounded">      <div class="flex-1">        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name</h3>        <p class="text-gray-600 dark:text-gray-400">$19.99</p>      </div>      <button class="bg-blue-500 text-white rounded-full px-3 py-1 shadow transition duration-300 hover:bg-blue-600">Remove</button>    </li>    <li class="flex items-center border p-4 rounded-lg bg-white shadow-inner dark:bg-gray-600">      <img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="mr-4 rounded">      <div class="flex-1">        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Another Product</h3>        <p class="text-gray-600 dark:text-gray-400">$29.99</p>      </div>      <button class="bg-blue-500 text-white rounded-full px-3 py-1 shadow transition duration-300 hover:bg-blue-600">Remove</button>    </li>  </ul>  <div class="mt-6">    <h4 class="text-lg font-bold text-gray-800 dark:text-gray-200">Total: <span class="text-blue-500">$49.98</span></h4>  </div>  <button class="mt-4 bg-green-500 text-white rounded-full px-4 py-2 shadow transition duration-300 hover:bg-green-600">Checkout</button>  <footer class="mt-6 text-center text-gray-600 dark:text-gray-400">    <p>Created for Portfolio</p>  </footer> </div>

购物车组件

一个简单的响应式购物车组件，采用复古设计、互补色配色方案，并支持黑暗模式，使用Tailwind CSS构建。

打开预览

                <div class="container mx-auto p-4">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
    <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Shopping Cart</h2>
    <div class="space-y-4">
      <!-- Cart Item -->
      <div class="flex justify-between items-center border-b pb-4 border-gray-200 dark:border-gray-700">
        <div class="flex items-center">
          <img class="w-16 h-16 object-cover rounded mr-4 filter sepia" src="https://picsum.photos/seed/retro1/100/100" alt="Product Image">
          <div>
            <h3 class="text-gray-800 dark:text-white font-medium">Retro T-Shirt</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm">Size: L</p>
          </div>
        </div>
        <div class="text-gray-700 dark:text-gray-200 font-semibold">$29.99</div>
      </div>
      <!-- Cart Item -->
      <div class="flex justify-between items-center border-b pb-4 border-gray-200 dark:border-gray-700">
        <div class="flex items-center">
          <img class="w-16 h-16 object-cover rounded mr-4 filter sepia" src="https://picsum.photos/seed/retro2/100/100" alt="Product Image">
          <div>
            <h3 class="text-gray-800 dark:text-white font-medium">Vintage Jeans</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm">Size: 32</p>
          </div>
        </div>
        <div class="text-gray-700 dark:text-gray-200 font-semibold">$59.99</div>
      </div>
    </div>
    <div class="flex justify-between items-center mt-6">
      <div class="text-xl font-bold text-gray-800 dark:text-white">Total:</div>
      <div class="text-xl font-bold text-gray-800 dark:text-white">$89.98</div>
    </div>
    <button class="mt-6 w-full bg-rose-500 hover:bg-rose-600 text-white font-bold py-2 px-4 rounded dark:bg-teal-500 dark:hover:bg-teal-600 filter sepia">Checkout</button>
  </div>
</div>