Shopping Cart Component
A 3D designed shopping cart component with responsive effects and dark theme support using Tailwind CSS.
HTML Code
<div class='bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 max-w-md mx-auto transform transition-all duration-300 hover:scale-105'>
<h2 class='text-xl font-semibold text-gray-800 dark:text-white'>Shopping Cart</h2>
<ul class='mt-4 space-y-4'>
<li class='flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md'>
<img src='https://picsum.photos/50/50' alt='Product Image' class='rounded-lg'>
<div class='flex-grow pl-4'>
<h3 class='text-gray-800 dark:text-white font-medium'>Product Name</h3>
<p class='text-gray-600 dark:text-gray-300'>$19.99</p>
</div>
<button class='bg-red-500 text-white px-3 py-1 rounded-md hover:bg-red-600 transition'>Remove</button>
</li>
<li class='flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md'>
<img src='https://picsum.photos/50/50' alt='Product Image' class='rounded-lg'>
<div class='flex-grow pl-4'>
<h3 class='text-gray-800 dark:text-white font-medium'>Another Product</h3>
<p class='text-gray-600 dark:text-gray-300'>$29.99</p>
</div>
<button class='bg-red-500 text-white px-3 py-1 rounded-md hover:bg-red-600 transition'>Remove</button>
</li>
</ul>
<div class='mt-6 flex justify-between items-center'>
<span class='text-gray-800 dark:text-white text-lg'>Total:</span>
<span class='text-gray-800 dark:text-white text-lg font-semibold'>$49.98</span>
</div>
<button class='mt-5 w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600 transition'>Proceed to Checkout</button>
</div>Related Components
Shopping Cart Component
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.
Neumorphic Shopping Cart
A Neumorphic shopping cart component using a triadic color scheme. It has moderate complexity, designed for business/corporate websites. The component is responsive and includes dark mode support using Tailwind's dark: prefix. Includes placeholders for items with quantity and price, a subtotal, and a checkout button. Uses picsum.photos for product images.
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.