Shopping Cart Component
A responsive shopping cart component designed with a brutalism style, featuring high contrast and unusual layouts. It supports dark theme with Tailwind CSS.
HTML Code
<div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Shopping Cart</h2>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4">
<div class="flex items-center justify-between border-b border-gray-300 dark:border-gray-600 pb-2 mb-2">
<img src="https://picsum.photos/60" alt="Product Image" class="w-16 h-16 object-cover rounded-lg">
<div class="flex-1 px-4">
<h3 class="font-semibold text-gray-800 dark:text-white">Product Title</h3>
<p class="text-gray-600 dark:text-gray-300">$49.99</p>
</div>
<button class="bg-red-500 text-white p-2 rounded-lg hover:bg-red-600 transition duration-200">Remove</button>
</div>
<div class="flex items-center justify-between border-b border-gray-300 dark:border-gray-600 pb-2 mb-2">
<img src="https://picsum.photos/60" alt="Product Image" class="w-16 h-16 object-cover rounded-lg">
<div class="flex-1 px-4">
<h3 class="font-semibold text-gray-800 dark:text-white">Another Product</h3>
<p class="text-gray-600 dark:text-gray-300">$29.99</p>
</div>
<button class="bg-red-500 text-white p-2 rounded-lg hover:bg-red-600 transition duration-200">Remove</button>
</div>
<div class="flex justify-between items-center mt-4">
<h4 class="text-xl font-bold text-gray-800 dark:text-white">Total:</h4>
<p class="text-xl font-bold text-gray-800 dark:text-white">$79.98</p>
</div>
<button class="w-full mt-4 bg-blue-500 text-white p-2 rounded-lg hover:bg-blue-600 transition duration-200">Checkout</button>
</div>
<div class="flex items-center justify-center mt-4">
<p class="text-gray-600 dark:text-gray-300 text-sm">Need help? <a href="#" class="text-blue-500 hover:underline">Contact us</a></p>
</div>
</div>Related Components
Shopping Cart Component
A brutalist shopping cart component with dark mode support and responsive design.
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.
Shopping Cart Component
A complex, responsive shopping cart component with microinteractions and analogous colors, for social media, with dark mode support using Tailwind CSS.