Cerca componenti

Categorie

Carrello

Funzione e-commerce per il ritiro degli articoli da acquistare

Retro_Vintage_Shopping_Cart_Component

Un semplice componente del carrello della spesa in stile retrò/vintage con una combinazione di colori in scala di grigi, ottimizzato per siti Web aziendali/aziendali e completamente reattivo con supporto per la modalità scura.

Aperto Anteprima

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

Componente del carrello della spesa

Un semplice componente del carrello della spesa per l'e-commerce, con un aspetto reattivo del Material Design, una combinazione di colori complementari e il supporto per temi scuri.

Aperto Anteprima

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

Componente del carrello della spesa

Componente del carrello della spesa skeuomorfico con combinazione di colori pastello, supporto per la modalità reattiva e scura.

Aperto Anteprima

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

Componente del carrello della spesa

Componente del carrello della spesa con design 3D, toni della terra ed elementi interattivi complessi. È progettato per un blog/sito Web di contenuti, con design reattivo e supporto per temi scuri, utilizzando Tailwind CSS.

Aperto Anteprima

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

Componente del carrello della spesa

Un semplice componente del carrello della spesa in modalità scura con un design reattivo, con elenchi di prodotti, quantità e un totale. Utilizza una combinazione di colori triadici con uno sfondo scuro. È progettato per il consumo di contenuti.

Aperto Anteprima

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

Componente del carrello della spesa

Un componente del carrello della spesa in stile retrò/vintage con combinazione di colori in scala di grigi, complessità moderata e design reattivo con supporto per temi scuri. Progettato per siti web aziendali/aziendali che utilizzano Tailwind CSS. Niente JavaScript, solo HTML con le classi Tailwind. Utilizza picsum.photos per le immagini e randomuser.me per gli avatar.

Aperto Anteprima

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

Componente del carrello della spesa

Un componente del carrello della spesa semplice e reattivo con supporto per il tema scuro, con uno stile che utilizza Tailwind CSS seguendo i principi del Material Design con una combinazione di colori in scala di grigi. Utilizza picsum.photos per le immagini dei prodotti.

Aperto Anteprima

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

Componente del carrello 3D

Un componente del carrello della spesa di grande impatto visivo con elementi di design 3D che creano profondità e coinvolgimento. Utilizza una combinazione di colori triadica (blu primario, rosso vivido e giallo ambra) per l'interesse visivo. Questa complessa interfaccia include elenchi di prodotti con immagini, controlli della quantità, riepiloghi dei prezzi ed effetti al passaggio del mouse che simulano il movimento 3D. Completamente reattivo con supporto per temi scuri. Il componente è progettato per un ambiente di contenuti/blog in cui i lettori possono acquistare prodotti consigliati mentre consumano contenuti.

Aperto Anteprima

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

Componente del carrello della spesa

Un componente del carrello della spesa reattivo progettato per una piattaforma di e-commerce, caratterizzato da uno stile di design 3D e una combinazione di colori pastello. È dotato di molteplici elementi interattivi come elenchi di prodotti, quantità e un pulsante di pagamento, che supporta il tema scuro.

Aperto Anteprima

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

Componente del carrello della spesa

Un componente del carrello della spesa ottimizzato per le interfacce dei social media, caratterizzato da microinterazioni, colori vivaci e un layout semplice. Include il design reattivo e il supporto per la modalità scura.

Aperto Anteprima

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