Shopping Cart Component
A retro vintage styled shopping cart component with responsive design and dark mode support, utilizing Tailwind CSS and featuring placeholder images and avatars.
HTML Code
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-md mx-auto mt-10">
<h2 class="text-2xl font-bold text-center text-black dark:text-white">Shopping Cart</h2>
<ul class="mt-4">
<li class="flex items-center justify-between py-2 border-b border-gray-300">
<img src="https://picsum.photos/50/50" alt="Product Image" class="rounded-md">
<div class="ml-3">
<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">$29.99</p>
</div>
<input type="number" value="1" class="border rounded-md w-16 text-center" />
<button class="ml-2 text-red-500 font-bold">Remove</button>
</li>
<li class="flex items-center justify-between py-2 border-b border-gray-300">
<img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="rounded-md">
<div class="ml-3">
<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">$49.99</p>
</div>
<input type="number" value="1" class="border rounded-md w-16 text-center" />
<button class="ml-2 text-red-500 font-bold">Remove</button>
</li>
<li class="flex items-center justify-between py-2 border-b border-gray-300">
<img src="https://picsum.photos/50/50?random=2" alt="Product Image" class="rounded-md">
<div class="ml-3">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 3</h3>
<p class="text-gray-600 dark:text-gray-400">$19.99</p>
</div>
<input type="number" value="1" class="border rounded-md w-16 text-center" />
<button class="ml-2 text-red-500 font-bold">Remove</button>
</li>
</ul>
<div class="mt-4 flex justify-between">
<p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Total:</p>
<p class="text-lg font-bold text-gray-800 dark:text-gray-200">$99.97</p>
</div>
<button class="mt-6 w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-md transition duration-300 ease-in-out">Checkout</button>
</div>
Related Components
Shopping Cart Component
A simple and minimalist shopping cart component using Tailwind CSS, with earth tones color scheme, social media purpose, and dark theme support. It is responsive and includes sample items. This component is designed for basic display with minimal elements and no JavaScript.
Shopping Cart Component
A responsive Shopping Cart component designed in Neumorphism style using Tailwind CSS, suitable for social media interfaces with dark theme support.
Shopping Cart Component
A responsive shopping cart component with a skeuomorphic design, featuring dark theme support and random placeholder images.