Search Components

Shopping Cart

E-commerce feature for collecting items to purchase

Retro_Vintage_Shopping_Cart_Component

A simple, retro/vintage styled shopping cart component with a grayscale color scheme, optimized for business/corporate websites and fully responsive with dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen text-gray-800 dark:text-gray-200 font-mono">
  <div class="max-w-xl mx-auto border border-gray-300 dark:border-gray-700 p-6 sm:p-8 bg-white dark:bg-gray-800 shadow-lg">
    <h2 class="text-2xl sm:text-3xl font-bold text-center uppercase mb-8 tracking-widest">Your Order</h2>

    <div class="space-y-6 mb-8">
      <!-- Cart Item 1 -->
      <div class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 pb-4">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/80/80?random=1" alt="Product Image" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border border-gray-300 dark:border-gray-600">
          <div>
            <p class="text-lg font-semibold">Classic Widget</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Quantity: 1</p>
          </div>
        </div>
        <p class="text-lg font-bold">$19.99</p>
      </div>

      <!-- Cart Item 2 -->
      <div class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 pb-4">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/80/80?random=2" alt="Product Image" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border border-gray-300 dark:border-gray-600">
          <div>
            <p class="text-lg font-semibold">Turbo Charger</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Quantity: 2</p>
          </div>
        </div>
        <p class="text-lg font-bold">$99.98</p>
      </div>

      <!-- Cart Item 3 -->
      <div class="flex items-center justify-between">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/80/80?random=3" alt="Product Image" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border border-gray-300 dark:border-gray-600">
          <div>
            <p class="text-lg font-semibold">Mega Bolt Kit</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Quantity: 1</p>
          </div>
        </div>
        <p class="text-lg font-bold">$34.50</p>
      </div>
    </div>

    <!-- Order Summary -->
    <div class="border-t border-gray-300 dark:border-gray-700 pt-6 space-y-3 mb-8">
      <div class="flex justify-between items-center">
        <p class="text-gray-700 dark:text-gray-300">Subtotal:</p>
        <p class="font-bold">$154.47</p>
      </div>
      <div class="flex justify-between items-center">
        <p class="text-gray-700 dark:text-gray-300">Shipping:</p>
        <p class="font-bold">$7.50</p>
      </div>
      <div class="flex justify-between items-center text-xl font-extrabold border-t border-gray-300 dark:border-gray-700 pt-3 mt-3">
        <p>Total:</p>
        <p>$161.97</p>
      </div>
    </div>

    <button class="w-full py-3 px-6 bg-black text-white dark:bg-gray-100 dark:text-gray-900 uppercase tracking-widest text-lg sm:text-xl font-bold border-2 border-black dark:border-gray-100 hover:bg-gray-800 dark:hover:bg-gray-300 transition-colors duration-200">
      Checkout</button>
  </div>
</div>

Shopping Cart Component

A simple shopping cart component for e-commerce, with a responsive Material Design look, complementary color scheme, and dark theme support.

Open Preview

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

    <!-- Cart Item 1 -->
    <div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
      <img class="w-20 h-20 object-cover rounded-md mr-4" src="https://picsum.photos/seed/item1/200/200" alt="Product Image">
      <div class="flex-grow">
        <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">Category</p>
        <div class="flex items-center mt-2">
          <span class="text-xl font-bold text-gray-800 dark:text-gray-200">$29.99</span>
          <span class="ml-4 text-gray-500 dark:text-gray-400">Qty: 1</span>
        </div>
      </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-200 dark:border-gray-700 pb-4 mb-4">
      <img class="w-20 h-20 object-cover rounded-md mr-4" src="https://picsum.photos/seed/item2/200/200" alt="Product Image">
      <div class="flex-grow">
        <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">Category</p>
        <div class="flex items-center mt-2">
          <span class="text-xl font-bold text-gray-800 dark:text-gray-200">$49.99</span>
          <span class="ml-4 text-gray-500 dark:text-gray-400">Qty: 1</span>
        </div>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Cart Summary -->
    <div class="flex justify-between items-center mt-6">
      <span class="text-xl font-bold text-gray-800 dark:text-gray-200">Total:</span>
      <span class="text-2xl font-bold text-blue-600 dark:text-blue-400">$79.98</span>
    </div>

    <button class="mt-8 w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-md shadow-md dark:bg-blue-500 dark:hover:bg-blue-600">
      Proceed to Checkout
    </button>
  </div>
</div>

Shopping Cart Component

Skeuomorphic Shopping Cart Component with Pastel color scheme, responsive and dark mode support.

Open Preview

                <div class="p-4 bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans">

  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-700 rounded-2xl shadow-xl p-8 transform transition duration-300 hover:scale-105">
    <h1 class="text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-8 text-center drop-shadow-md">🛒 Your Skeuomorphic Cart </h1>

    <!-- Cart Item 1 -->
    <div class="flex items-center bg-gradient-to-br from-rose-50 to-rose-100 dark:from-gray-600 dark:to-gray-700 rounded-xl p-6 mb-6 shadow-lg transform transition duration-300 hover:shadow-2xl hover:-translate-y-1">
      <img src="https://picsum.photos/seed/item1/150/150" alt="Product Image" class="w-32 h-32 object-cover rounded-lg shadow-md border-4 border-rose-200 dark:border-gray-500 mr-6">
      <div class="flex-grow">
        <h2 class="text-2xl font-bold text-rose-800 dark:text-rose-200 mb-2">Vintage Leather Briefcase</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">A classic briefcase for the modern professional.</p>
        <div class="flex items-center justify-between">
          <span class="text-3xl font-extrabold text-rose-900 dark:text-rose-100">$129.00</span>
          <div class="flex items-center">
            <button class="bg-rose-300 dark:bg-rose-600 text-white p-3 rounded-full shadow-lg hover:bg-rose-400 dark:hover:bg-rose-700 transition duration-300 focus:outline-none focus:ring-4 focus:ring-rose-200 dark:focus:ring-rose-500 active:bg-rose-500 w-10 h-10 flex items-center justify-center text-xl font-bold">-</button>
            <span class="text-2xl font-bold text-gray-800 dark:text-gray-100 mx-4">1</span>
            <button class="bg-rose-300 dark:bg-rose-600 text-white p-3 rounded-full shadow-lg hover:bg-rose-400 dark:hover:bg-rose-700 transition duration-300 focus:outline-none focus:ring-4 focus:ring-rose-200 dark:focus:ring-rose-500 active:bg-rose-500 w-10 h-10 flex items-center justify-center text-xl font-bold">+</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Cart Item 2 -->
    <div class="flex items-center bg-gradient-to-br from-teal-50 to-teal-100 dark:from-gray-600 dark:to-gray-700 rounded-xl p-6 mb-6 shadow-lg transform transition duration-300 hover:shadow-2xl hover:-translate-y-1">
      <img src="https://picsum.photos/seed/item2/150/150" alt="Product Image" class="w-32 h-32 object-cover rounded-lg shadow-md border-4 border-teal-200 dark:border-gray-500 mr-6">
      <div class="flex-grow">
        <h2 class="text-2xl font-bold text-teal-800 dark:text-teal-200 mb-2">Handcrafted Ceramic Mug</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">Perfect for your morning coffee or tea.</p>
        <div class="flex items-center justify-between">
          <span class="text-3xl font-extrabold text-teal-900 dark:text-teal-100">$25.00</span>
          <div class="flex items-center">
            <button class="bg-teal-300 dark:bg-teal-600 text-white p-3 rounded-full shadow-lg hover:bg-teal-400 dark:hover:bg-teal-700 transition duration-300 focus:outline-none focus:ring-4 focus:ring-teal-200 dark:focus:ring-teal-500 active:bg-teal-500 w-10 h-10 flex items-center justify-center text-xl font-bold">-</button>
            <span class="text-2xl font-bold text-gray-800 dark:text-gray-100 mx-4">2</span>
            <button class="bg-teal-300 dark:bg-teal-600 text-white p-3 rounded-full shadow-lg hover:bg-teal-400 dark:hover:bg-teal-700 transition duration-300 focus:outline-none focus:ring-4 focus:ring-teal-200 dark:focus:ring-teal-500 active:bg-teal-500 w-10 h-10 flex items-center justify-center text-xl font-bold">+</button>
          </div>

        </div>
      </div>
    </div>

    <!-- Cart Summary -->
    <div class="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-600 dark:to-gray-700 rounded-xl p-8 mt-8 shadow-lg border-t-4 border-blue-200 dark:border-gray-500">
      <div class="flex justify-between items-center mb-4">
        <span class="text-2xl font-semibold text-gray-700 dark:text-gray-200">Subtotal:</span>
        <span class="text-2xl font-extrabold text-blue-800 dark:text-blue-200">$179.00</span>
      </div>
      <div class="flex justify-between items-center mb-6">
        <span class="text-2xl font-semibold text-gray-700 dark:text-gray-200">Shipping:</span>
        <span class="text-2xl font-extrabold text-blue-800 dark:text-blue-200">$10.00</span>
      </div>
      <div class="flex justify-between items-center border-t-2 border-blue-200 dark:border-gray-500 pt-6">
        <span class="text-3xl font-bold text-gray-800 dark:text-gray-100">Total:</span>
        <span class="text-3xl font-extrabold text-blue-900 dark:text-blue-100">$189.00</span>
      </div>
      <button class="w-full bg-blue-500 dark:bg-blue-700 text-white text-3xl font-bold py-4 rounded-xl mt-8 shadow-xl hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 active:bg-blue-700">
        Proceed to Checkout
      </button>
    </div>
  </div>
</div>

Shopping Cart Component

Shopping Cart Component with 3D design, earth tones, and complex interactive elements. It is designed for a blog/content website, with responsive design and dark theme support, using Tailwind CSS.

Open Preview

                <div class="container mx-auto p-4 font-sans antialiased text-gray-800 dark:text-gray-200">
    <div class="relative min-h-screen bg-gradient-to-br from-indigo-100 to-purple-200 dark:from-gray-900 dark:to-gray-800 rounded-3xl shadow-2xl p-6 lg:p-10 transform skew-y-1 scale-95 origin-top-left">
        <div class="absolute inset-0 bg-white dark:bg-gray-700 opacity-60 rounded-3xl transform -skew-y-1 scale-95 origin-bottom-right shadow-xl"></div>
        <div class="absolute inset-0 bg-yellow-100 dark:bg-yellow-900 rounded-3xl transform skew-y-1 scale-95 origin-top-left shadow-xl"></div>
        <div class="relative z-10 p-4 lg:p-8 bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700 animate-fade-in-down">

            <!-- Header -->
            <div class="mb-8 border-b border-gray-200 dark:border-gray-700 pb-4">
                <h1 class="text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-2 transform perspective-1000 rotateY-5 scale-105">
                    <span class="bg-clip-text text-transparent bg-gradient-to-r from-green-600 to-indigo-600 dark:from-green-400 dark:to-indigo-400">Your Shopping Cart</span>
                </h1>
                <p class="text-lg lg:text-xl text-gray-600 dark:text-gray-400 italic">Review your selections</p>
            </div>

            <!-- Cart Items Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 animate-fade-in-up">

                <!-- Cart Item 1 -->
                <div class="bg-white dark:bg-gray-700 shadow-lg rounded-xl overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl border border-gray-200 dark:border-gray-600 relative perspective-800">
                    <div class="absolute inset-0 bg-gradient-to-br from-orange-200 to-yellow-200 dark:from-orange-800 dark:to-yellow-800 opacity-20 transform skew-y-2 origin-top-right"></div>
                    <div class="p-6 relative z-10">
                        <img class="w-full h-40 object-cover rounded-md mb-4 shadow-md border border-gray-300 dark:border-gray-600 transform translateZ-20 bg-gray-200 dark:bg-gray-600" src="https://picsum.photos/seed/item1/400/250" alt="Product Image">
                        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Adventure Backpack</h3>
                        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Durable and spacious, perfect for hiking.</p>
                        <div class="flex items-center justify-between mb-4">
                            <span class="text-xl lg:text-2xl font-bold text-green-700 dark:text-green-400 shadow-text-sm">$79.99</span>
                            <div class="flex items-center">
                                <button class="bg-red-500 dark:bg-red-700 text-white p-2 rounded-full hover:bg-red-600 dark:hover:bg-red-800 transition transform scale-105 active:scale-95 shadow-md mr-2">-</button>
                                <span class="text-lg font-medium text-gray-800 dark:text-gray-200">1</span>
                                <button class="bg-green-500 dark:bg-green-700 text-white p-2 rounded-full hover:bg-green-600 dark:hover:bg-green-800 transition transform scale-105 active:scale-95 shadow-md ml-2">+</button>
                            </div>
                        </div>
                        <button class="w-full bg-red-600 dark:bg-red-800 text-white py-2 px-4 rounded-lg hover:bg-red-700 dark:hover:bg-red-900 transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 shadow-lg relative perspective-600 z-20">
                            <span class="relative z-10">Remove</span>
                            <div class="absolute inset-0 bg-red-500 dark:bg-red-700 opacity-30 blur-sm"></div>
                        </button>
                    </div>
                </div>

                <!-- Cart Item 2 -->
                <div class="bg-white dark:bg-gray-700 shadow-lg rounded-xl overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl border border-gray-200 dark:border-gray-600 relative perspective-800">
                    <div class="absolute inset-0 bg-gradient-to-br from-cyan-200 to-blue-200 dark:from-cyan-800 dark:to-blue-800 opacity-20 transform skew-y-2 origin-top-right"></div>
                    <div class="p-6 relative z-10">
                        <img class="w-full h-40 object-cover rounded-md mb-4 shadow-md border border-gray-300 dark:border-gray-600 transform translateZ-20 bg-gray-200 dark:bg-gray-600" src="https://picsum.photos/seed/item2/400/250" alt="Product Image">
                        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Wireless Noise-Cancelling Headphones</h3>
                        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Immersive sound experience with comfort.</p>
                        <div class="flex items-center justify-between mb-4">
                            <span class="text-xl lg:text-2xl font-bold text-green-700 dark:text-green-400 shadow-text-sm">$129.99</span>
                            <div class="flex items-center">
                                <button class="bg-red-500 dark:bg-red-700 text-white p-2 rounded-full hover:bg-red-600 dark:hover:bg-red-800 transition transform scale-105 active:scale-95 shadow-md mr-2">-</button>
                                <span class="text-lg font-medium text-gray-800 dark:text-gray-200">1</span>
                                <button class="bg-green-500 dark:bg-green-700 text-white p-2 rounded-full hover:bg-green-600 dark:hover:bg-green-800 transition transform scale-105 active:scale-95 shadow-md ml-2">+</button>
                            </div>
                        </div>
                        <button class="w-full bg-red-600 dark:bg-red-800 text-white py-2 px-4 rounded-lg hover:bg-red-700 dark:hover:bg-red-900 transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 shadow-lg relative perspective-600 z-20">
                            <span class="relative z-10">Remove</span>
                            <div class="absolute inset-0 bg-red-500 dark:bg-red-700 opacity-30 blur-sm"></div>
                        </button>
                    </div>
                </div>

                <!-- Cart Item 3 -->
                <div class="bg-white dark:bg-gray-700 shadow-lg rounded-xl overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl border border-gray-200 dark:border-gray-600 relative perspective-800">
                    <div class="absolute inset-0 bg-gradient-to-br from-pink-200 to-red-200 dark:from-pink-800 dark:to-red-800 opacity-20 transform skew-y-2 origin-top-right"></div>
                    <div class="p-6 relative z-10">
                        <img class="w-full h-40 object-cover rounded-md mb-4 shadow-md border border-gray-300 dark:border-gray-600 transform translateZ-20 bg-gray-200 dark:bg-gray-600" src="https://picsum.photos/seed/item3/400/250" alt="Product Image">
                        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Vintage Leather Journal</h3>
                        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Handcrafted for timeless writing.</p>
                        <div class="flex items-center justify-between mb-4">
                            <span class="text-xl lg:text-2xl font-bold text-green-700 dark:text-green-400 shadow-text-sm">$24.99</span>
                            <div class="flex items-center">
                                <button class="bg-red-500 dark:bg-red-700 text-white p-2 rounded-full hover:bg-red-600 dark:hover:bg-red-800 transition transform scale-105 active:scale-95 shadow-md mr-2">-</button>
                                <span class="text-lg font-medium text-gray-800 dark:text-gray-200">2</span>
                                <button class="bg-green-500 dark:bg-green-700 text-white p-2 rounded-full hover:bg-green-600 dark:hover:bg-green-800 transition transform scale-105 active:scale-95 shadow-md ml-2">+</button>
                            </div>
                        </div>
                        <button class="w-full bg-red-600 dark:bg-red-800 text-white py-2 px-4 rounded-lg hover:bg-red-700 dark:hover:bg-red-900 transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 shadow-lg relative perspective-600 z-20">
                            <span class="relative z-10">Remove</span>
                            <div class="absolute inset-0 bg-red-500 dark:bg-red-700 opacity-30 blur-sm"></div>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Cart Summary -->
            <div class="mt-8 border-t border-gray-200 dark:border-gray-700 pt-6 animate-fade-in-up">
                <div class="flex flex-col md:flex-row justify-between items-center mb-6">
                    <div class="text-2xl font-semibold text-gray-900 dark:text-white mb-4 md:mb-0 transform perspective-1000 rotateY-5 scale-105">
                        Total: <span class="text-green-700 dark:text-green-400">$259.97</span>
                    </div>
                    <button class="bg-green-600 dark:bg-green-800 text-white py-3 px-8 rounded-full text-lg font-bold hover:bg-green-700 dark:hover:bg-green-900 transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 shadow-xl relative perspective-600 z-20">
                        <span class="relative z-10">Proceed to Checkout</span>
                        <div class="absolute inset-0 bg-green-500 dark:bg-green-700 opacity-30 blur-sm"></div>
                    </button>
                </div>

                <!-- Shipping and Payment Info Placeholder -->
                <div class="bg-gray-100 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 italic text-center transform translateZ-10 relative perspective-500">
                    <p class="mb-2">Shipping options and payment methods will appear here.</p>
                    <p>Continue shopping or apply discount codes.</p>
                    <div class="absolute inset-0 transform -skew-y-3 skew-x-3 bg-gradient-to-tr from-gray-300 to-gray-400 dark:from-gray-600 dark:to-gray-500 opacity-20 blur-sm"></div>
                    <div class="absolute inset-0 transform skew-y-2 skew-x-2 bg-gradient-to-bl from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-600 opacity-10"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* Basic 3D transform utilities */
    .perspective-1000 {
        perspective: 1000px;
    }
    .rotateY-5 {
        transform: rotateY(5deg);
    }
    .translateZ-20 {
        transform: translateZ(20px);
    }
    .shadow-text-sm {
        text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    }

    /* Keyframe Animations */
    @keyframes fade-in-down {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fade-in-up {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animate-fade-in-down {
        animation: fade-in-down 0.6s ease-out forwards;
    }

    .animate-fade-in-up {
        animation: fade-in-up 0.6s ease-out forwards;
    }

    /* Custom shadow for 3D effect on buttons */
    .shadow-lg {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05),
                    0 2px 4px -1px rgba(0, 0, 0, 0.03)
                    /* inset 0 0 0 1px rgba(255, 255, 255, 0.1) for subtle inner highlight */;
    }
    .dark .shadow-lg {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.15),
                    0 2px 4px -1px rgba(0, 0, 0, 0.1);
    }

    .perspective-800 {
        perspective: 800px;
    }

    .transform-style-preserve-3d {
        transform-style: preserve-3d;
    }

    /* This is a common way to emulate 3d effects by creating a subtle layer behind */
    .relative .absolute {
        backface-visibility: hidden;
    }

     /* Additional subtle 3D effects for inner elements */
    .inner-element-3d {
        transform: translateZ(10px) rotateX(2deg);
        transition: transform 0.3s ease-out;
    }
    .hover\:inner-element-3d\:hover:translateZ-15 {
        transform: translateZ(15px) rotateX(0deg);
    }
</style>

A simple dark mode shopping cart component with a responsive design, featuring product listings, quantities, and a total. It uses a triadic color scheme with a dark background. It is designed for content consumption.

Open Preview

                <div class="dark:bg-gray-900 dark:text-white min-h-screen p-4">
  <h1 class="text-2xl font-bold mb-6 text-center text-blue-400">Your Shopping Cart</h1>

  <div class="max-w-md mx-auto bg-gray-800 rounded-lg shadow-lg p-5">

    <!-- Product Item 1 -->
    <div class="flex items-center mb-5">
      <img src="https://picsum.photos/id/237/80/80" alt="Product Image" class="w-20 h-20 object-cover rounded-md mr-4">
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-green-400">Awesome Gadget</h3>
        <p class="text-gray-400">Quantity: 1</p>
      </div>
      <span class="text-lg font-bold text-red-400">$29.99</span>
    </div>

    <!-- Product Item 2 -->
    <div class="flex items-center mb-5">
      <img src="https://picsum.photos/id/238/80/80" alt="Product Image" class="w-20 h-20 object-cover rounded-md mr-4">
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-green-400">Super Item</h3>
        <p class="text-gray-400">Quantity: 2</p>
      </div>
      <span class="text-lg font-bold text-red-400">$19.50</span>
    </div>

    <!-- Product Item 3 -->
    <div class="flex items-center mb-5">
      <img src="https://picsum.photos/id/239/80/80" alt="Product Image" class="w-20 h-20 object-cover rounded-md mr-4">
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-green-400">Mega Product</h3>
        <p class="text-gray-400">Quantity: 1</p>
      </div>
      <span class="text-lg font-bold text-red-400">$49.00</span>
    </div>

    <!-- Total -->
    <div class="border-t border-gray-700 pt-4 flex justify-between items-center">
      <span class="text-xl font-bold text-blue-400">Total:</span>
      <span class="text-xl font-bold text-red-400">$98.49</span>
    </div>

    <button class="mt-6 w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg focus:outline-none focus:shadow-outline transition duration-300">
      Proceed to Checkout
    </button>
  </div>

  <!-- Responsive adjustments -->
  <style>
    @media (max-width: 640px) {
      .max-w-md {
        margin-left: 1rem;
        margin-right: 1rem;
      }
    }
  </style>
</div>

Shopping Cart Component

A retro/vintage style shopping cart component with grayscale color scheme, moderate complexity, and responsive design with dark theme support. Designed for business/corporate websites using Tailwind CSS. No JavaScript, only HTML with Tailwind classes. Uses picsum.photos for images and randomuser.me for avatars.

Open Preview

                <div class="antialiased dark:bg-gray-900 dark:text-gray-200">
  <div class="h-full bg-gray-100 dark:bg-gray-800 p-8">
    <div class="mx-auto max-w-3xl">
      <header class="flex items-center justify-between">
        <h1 class="text-2xl font-bold text-gray-800 dark:text-white">Your Cart</h1>
        <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Continue Shopping</a>
      </header>

      <div class="mt-8">
        <ul class="space-y-4">
          <li class="flex items-center rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-700">
            <img src="https://picsum.photos/seed/product1/80/80" alt="Nike Air Force 1" class="h-20 w-20 rounded-lg object-cover mr-4">
            <div class="flex-grow">
              <h3 class="text-base font-semibold text-gray-900 dark:text-white">Nike Air Force 1</h3>
              <p class="text-sm text-gray-500 dark:text-gray-300">Size: 10</p>
              <p class="text-sm text-gray-500 dark:text-gray-300">Color: White</p>
              <div class="mt-2 flex items-center justify-between">
                <span class="text-base font-bold text-gray-900 dark:text-white">$120.00</span>
                <div class="flex items-center">
                  <button type="button" class="inline-flex h-7 w-7 items-center justify-center rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">-</button>
                  <input type="text" class="w-10 border-0 bg-transparent text-center text-sm font-medium text-gray-900 dark:text-white" value="1" readonly>
                  <button type="button" class="inline-flex h-7 w-7 items-center justify-center rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">+</button>
                </div>
              </div>
            </div>
            <button class="ml-4 text-red-600 hover:text-red-500 dark:text-red-400 dark:hover:text-red-300">
              <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
            </button>
          </li>
          <li class="flex items-center rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-700">
            <img src="https://picsum.photos/seed/product2/80/80" alt="Apple Watch Series 7" class="h-20 w-20 rounded-lg object-cover mr-4">
            <div class="flex-grow">
              <h3 class="text-base font-semibold text-gray-900 dark:text-white">Apple Watch Series 7</h3>
              <p class="text-sm text-gray-500 dark:text-gray-300">Color: Space Gray</p>
              <p class="text-sm text-gray-500 dark:text-gray-300">Band: Solo Loop</p>
              <div class="mt-2 flex items-center justify-between">
                <span class="text-base font-bold text-gray-900 dark:text-white">$399.00</span>
                <div class="flex items-center">
                  <button type="button" class="inline-flex h-7 w-7 items-center justify-center rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">-</button>
                  <input type="text" class="w-10 border-0 bg-transparent text-center text-sm font-medium text-gray-900 dark:text-white" value="1" readonly>
                  <button type="button" class="inline-flex h-7 w-7 items-center justify-center rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">+</button>
                </div>
              </div>
            </div>
            <button class="ml-4 text-red-600 hover:text-red-500 dark:text-red-400 dark:hover:text-red-300">
              <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
            </button>
          </li>
        </ul>
      </div>

      <div class="mt-8 rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-700">
        <div class="flex items-center justify-between">
          <p class="text-base font-semibold text-gray-900 dark:text-white">Subtotal</p>
          <p class="text-base font-semibold text-gray-900 dark:text-white">$519.00</p>
        </div>
        <div class="mt-2 flex items-center justify-between">
          <p class="text-base font-semibold text-gray-900 dark:text-white">Shipping</p>
          <p class="text-base font-semibold text-gray-900 dark:text-white">Free</p>
        </div>
        <div class="mt-4 flex items-center justify-between border-t border-gray-200 pt-4 dark:border-gray-600">
          <p class="text-xl font-bold text-gray-900 dark:text-white">Total</p>
          <p class="text-xl font-bold text-gray-900 dark:text-white">$519.00</p>
        </div>
      </div>

      <div class="mt-8 flex justify-end">
        <button type="button" class="rounded-lg bg-gray-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800">Proceed to Checkout</button>
      </div>
    </div>
  </div>
</div>

Shopping Cart Component

A simple, responsive shopping cart component with dark theme support, styled using Tailwind CSS following Material Design principles with a grayscale color scheme. Uses picsum.photos for product images.

Open Preview

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

3D Shopping Cart Component

A visually striking shopping cart component with 3D design elements that create depth and engagement. Uses a triadic color scheme (primary blue, vivid red, and amber yellow) for visual interest. This complex interface includes product listings with images, quantity controls, price summaries, and hover effects that simulate 3D movement. Fully responsive with dark theme support. The component is designed for a content/blog environment where readers might purchase recommended products while consuming content.

Open Preview

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

Shopping Cart Component

A responsive shopping cart component designed for an e-commerce platform, featuring a 3D design style and a pastel color scheme. It is equipped with multiple interactive elements such as product listings, quantities, and a checkout button, supporting dark theme.

Open Preview

                <div class="min-h-screen bg-white dark:bg-gray-800 transition-all p-6 rounded-lg shadow-lg transform hover:scale-105 ease-in-out duration-300">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 text-center">Shopping Cart</h2>
    <div class="mt-4">
        <div class="space-y-4">
            <div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
                <img src="https://picsum.photos/80/80" alt="Product Image" class="rounded-lg shadow-lg" />
                <div class="flex-1 mx-4">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-gray-200">Product Title</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-300">$19.99</p>
                </div>
                <div class="flex items-center">
                    <button class="px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 ease-in-out duration-200">+</button>
                    <span class="mx-2 text-gray-800 dark:text-gray-100">1</span>
                    <button class="px-3 py-1 text-sm bg-red-500 text-white rounded hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800 ease-in-out duration-200">-</button>
                </div>
            </div>
            <div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
                <img src="https://picsum.photos/80/80?random=1" alt="Product Image" class="rounded-lg shadow-lg" />
                <div class="flex-1 mx-4">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-gray-200">Another Product</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-300">$29.99</p>
                </div>
                <div class="flex items-center">
                    <button class="px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 ease-in-out duration-200">+</button>
                    <span class="mx-2 text-gray-800 dark:text-gray-100">1</span>
                    <button class="px-3 py-1 text-sm bg-red-500 text-white rounded hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800 ease-in-out duration-200">-</button>
                </div>
            </div>
        </div>
        <div class="mt-6 flex justify-between items-center p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg">
            <span class="text-xl font-semibold text-gray-800 dark:text-gray-100">Total</span>
            <span class="text-xl font-semibold text-gray-800 dark:text-gray-100">$49.98</span>
        </div>
        <div class="mt-4">
            <button class="w-full bg-green-500 text-white text-lg font-semibold rounded-lg py-2 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800 transition duration-200">
                Checkout
            </button>
        </div>
    </div>
</div>

Shopping Cart Component

A shopping cart component optimized for social media interfaces, featuring microinteractions, vibrant colors, and a simple layout. Includes responsive design and dark mode support.

Open Preview

                <div class="p-4 bg-white dark:bg-gray-800 rounded-lg">
  <h2 class="text-xl font-bold mb-4 text-indigo-600 dark:text-indigo-400">Shopping Cart</h2>
  <div class="space-y-4">
    <!-- Cart Item -->
    <div class="flex items-center justify-between border-b pb-4 border-gray-200 dark:border-gray-700">
      <div class="flex items-center">
        <img src="https://picsum.photos/seed/item1/50/50" alt="Product Image" class="rounded mr-4">
        <div>
          <p class="font-semibold text-gray-800 dark:text-gray-200">Product Name 1</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">$19.99</p>
        </div>
      </div>
      <div class="text-indigo-600 dark:text-indigo-400 font-bold animate-bounce">
        x1
      </div>
    </div>
    <!-- Cart Item -->
    <div class="flex items-center justify-between border-b pb-4 border-gray-200 dark:border-gray-700">
      <div class="flex items-center">
        <img src="https://picsum.photos/seed/item2/50/50" alt="Product Image" class="rounded mr-4">
        <div>
          <p class="font-semibold text-gray-800 dark:text-gray-200">Product Name 2</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">$29.50</p>
        </div>
      </div>
      <div class="text-indigo-600 dark:text-indigo-400 font-bold animate-bounce">
        x2
      </div>
    </div>
  </div>
  <div class="flex justify-between items-center mt-6">
    <p class="text-lg font-bold text-gray-800 dark:text-gray-200">Total:</p>
    <p class="text-lg font-bold text-indigo-600 dark:text-indigo-400">$78.98</p>
  </div>
  <button class="mt-6 w-full bg-indigo-500 hover:bg-indigo-600 text-white py-2 rounded-md transition duration-300">
    Checkout
  </button>
</div>

Search Components

Categories

Shopping Cart