Shopping Cart Components
Beautiful shopping cart components built with TailwindCSS. Perfect for implementing cart functionality, item management, and checkout flows.
1. Detailed Cart Item with Table Layout
Comprehensive cart item display with product details, specifications, ratings, and pricing in a table format.
| Product | Details | Rating | Price | Actions |
|---|---|---|---|---|
Wireless HeadphonesSony WH-1000XM4 |
Color: Black Features: Noise Cancelling, 30hr Battery Warranty: 2 Years |
|
$299.99 $349.99 |
<!-- Detailed Cart Item with Table Layout -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
<table class="w-full">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">Product</th>
<th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">Details</th>
<th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">Rating</th>
<th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">Price</th>
<th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr>
<td class="px-6 py-4">
<div class="flex items-center space-x-4">
<img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=80&h=80&fit=crop" alt="Wireless Headphones" class="w-20 h-20 rounded-lg object-cover">
<div>
<h3 class="font-semibold text-gray-900">Wireless Headphones</h3>
<p class="text-sm text-gray-600">Sony WH-1000XM4</p>
</div>
</div>
</td>
<td class="px-6 py-4">
<div class="text-sm text-gray-600">
<p><strong>Color:</strong> Black</p>
<p><strong>Features:</strong> Noise Cancelling, 30hr Battery</p>
<p><strong>Warranty:</strong> 2 Years</p>
</div>
</td>
<td class="px-6 py-4">
<div class="flex items-center">
<div class="flex text-yellow-400">
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4 fill-current text-gray-300" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
<span class="ml-2 text-sm text-gray-600">(4.5/5)</span>
</div>
</td>
<td class="px-6 py-4">
<p class="text-lg font-bold text-purple-600">$299.99</p>
<p class="text-sm text-gray-500 line-through">$349.99</p>
</td>
<td class="px-6 py-4">
<button class="text-purple-600 hover:text-purple-800 font-medium">View Details</button>
</td>
</tr>
</tbody>
</table>
</div><template>
<!-- Detailed Cart Item with Table Layout -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
<table class="w-full">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">Product</th>
<th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">Details</th>
<th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">Rating</th>
<th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">Price</th>
<th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr>
<td class="px-6 py-4">
<div class="flex items-center space-x-4">
<img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=80&h=80&fit=crop" alt="Wireless Headphones" class="w-20 h-20 rounded-lg object-cover">
<div>
<h3 class="font-semibold text-gray-900">Wireless Headphones</h3>
<p class="text-sm text-gray-600">Sony WH-1000XM4</p>
</div>
</div>
</td>
<td class="px-6 py-4">
<div class="text-sm text-gray-600">
<p><strong>Color:</strong> Black</p>
<p><strong>Features:</strong> Noise Cancelling, 30hr Battery</p>
<p><strong>Warranty:</strong> 2 Years</p>
</div>
</td>
<td class="px-6 py-4">
<div class="flex items-center">
<div class="flex text-yellow-400">
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4 fill-current text-gray-300" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
<span class="ml-2 text-sm text-gray-600">(4.5/5)</span>
</div>
</td>
<td class="px-6 py-4">
<p class="text-lg font-bold text-purple-600">$299.99</p>
<p class="text-sm text-gray-500 line-through">$349.99</p>
</td>
<td class="px-6 py-4">
<button class="text-purple-600 hover:text-purple-800 font-medium">View Details</button>
</td>
</tr>
</tbody>
</table>
</div>
</template>export default function DetailedCartItem() {
return (
<div className="bg-white rounded-lg shadow-lg overflow-hidden">
<table className="w-full">
<thead className="bg-gray-50">
<tr>
<th className="px-6 py-4 text-left text-sm font-semibold text-gray-900">Product</th>
<th className="px-6 py-4 text-left text-sm font-semibold text-gray-900">Details</th>
<th className="px-6 py-4 text-left text-sm font-semibold text-gray-900">Rating</th>
<th className="px-6 py-4 text-left text-sm font-semibold text-gray-900">Price</th>
<th className="px-6 py-4 text-left text-sm font-semibold text-gray-900">Actions</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200">
<tr>
<td className="px-6 py-4">
<div className="flex items-center space-x-4">
<img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=80&h=80&fit=crop" alt="Wireless Headphones" className="w-20 h-20 rounded-lg object-cover" />
<div>
<h3 className="font-semibold text-gray-900">Wireless Headphones</h3>
<p className="text-sm text-gray-600">Sony WH-1000XM4</p>
</div>
</div>
</td>
<td className="px-6 py-4">
<div className="text-sm text-gray-600">
<p><strong>Color:</strong> Black</p>
<p><strong>Features:</strong> Noise Cancelling, 30hr Battery</p>
<p><strong>Warranty:</strong> 2 Years</p>
</div>
</td>
<td className="px-6 py-4">
<div className="flex items-center">
<div className="flex text-yellow-400">
<svg className="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg className="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg className="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg className="w-4 h-4 fill-current text-gray-300" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
<span className="ml-2 text-sm text-gray-600">(4.5/5)</span>
</div>
</td>
<td className="px-6 py-4">
<p className="text-lg font-bold text-purple-600">$299.99</p>
<p className="text-sm text-gray-500 line-through">$349.99</p>
</td>
<td className="px-6 py-4">
<button className="text-purple-600 hover:text-purple-800 font-medium">View Details</button>
</td>
</tr>
</tbody>
</table>
</div>
);
}2. Advanced Cart Item with Options
Cart item with size/color selectors, quantity controls, advanced pricing, and detailed specifications.
Premium Bluetooth Speaker
JBL GO 3 - Waterproof, Portable Wireless Speaker
Quantity:
2
$149.98
$74.99 each
<!-- Advanced Cart Item with Options -->
<div class="bg-white rounded-lg shadow-lg p-6">
<div class="flex items-start space-x-6">
<img src="https://images.unsplash.com/photo-1549298916-b41d501d3772?w=150&h=150&fit=crop" alt="Bluetooth Speaker" class="w-32 h-32 rounded-lg object-cover">
<div class="flex-1">
<h3 class="text-xl font-semibold text-gray-900 mb-2">Premium Bluetooth Speaker</h3>
<p class="text-gray-600 mb-4">JBL GO 3 - Waterproof, Portable Wireless Speaker</p>
<!-- Options -->
<div class="grid grid-cols-2 gap-4 mb-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Color</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
<option>Black</option>
<option>Blue</option>
<option>Red</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Size</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
<option>Standard</option>
<option>Large</option>
</select>
</div>
</div>
<!-- Quantity and Price -->
<div class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<span class="text-sm font-medium text-gray-700">Quantity:</span>
<div class="flex items-center space-x-2">
<button class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center text-gray-600 hover:bg-gray-300">-</button>
<span class="text-sm font-medium w-8 text-center">2</span>
<button class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center text-gray-600 hover:bg-gray-300">+</button>
</div>
</div>
<div class="text-right">
<p class="text-2xl font-bold text-purple-600">$149.98</p>
<p class="text-sm text-gray-500">$74.99 each</p>
</div>
</div>
<!-- Actions -->
<div class="flex items-center justify-between mt-6 pt-4 border-t border-gray-200">
<button class="text-gray-400 hover:text-red-500 flex items-center space-x-1">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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"/>
</svg>
<span class="text-sm">Remove</span>
</button>
<button class="text-purple-600 hover:text-purple-800 font-medium">Save for Later</button>
</div>
</div>
</div>
</div><template>
<!-- Advanced Cart Item with Options -->
<div class="bg-white rounded-lg shadow-lg p-6">
<div class="flex items-start space-x-6">
<img src="https://images.unsplash.com/photo-1549298916-b41d501d3772?w=150&h=150&fit=crop" alt="Bluetooth Speaker" class="w-32 h-32 rounded-lg object-cover">
<div class="flex-1">
<h3 class="text-xl font-semibold text-gray-900 mb-2">Premium Bluetooth Speaker</h3>
<p class="text-gray-600 mb-4">JBL GO 3 - Waterproof, Portable Wireless Speaker</p>
<!-- Options -->
<div class="grid grid-cols-2 gap-4 mb-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Color</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
<option>Black</option>
<option>Blue</option>
<option>Red</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Size</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
<option>Standard</option>
<option>Large</option>
</select>
</div>
</div>
<!-- Quantity and Price -->
<div class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<span class="text-sm font-medium text-gray-700">Quantity:</span>
<div class="flex items-center space-x-2">
<button class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center text-gray-600 hover:bg-gray-300">-</button>
<span class="text-sm font-medium w-8 text-center">2</span>
<button class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center text-gray-600 hover:bg-gray-300">+</button>
</div>
</div>
<div class="text-right">
<p class="text-2xl font-bold text-purple-600">$149.98</p>
<p class="text-sm text-gray-500">$74.99 each</p>
</div>
</div>
<!-- Actions -->
<div class="flex items-center justify-between mt-6 pt-4 border-t border-gray-200">
<button class="text-gray-400 hover:text-red-500 flex items-center space-x-1">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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"/>
</svg>
<span class="text-sm">Remove</span>
</button>
<button class="text-purple-600 hover:text-purple-800 font-medium">Save for Later</button>
</div>
</div>
</div>
</div>
</template>export default function AdvancedCartItem() {
return (
<div className="bg-white rounded-lg shadow-lg p-6">
<div className="flex items-start space-x-6">
<img src="https://images.unsplash.com/photo-1549298916-b41d501d3772?w=150&h=150&fit=crop" alt="Bluetooth Speaker" className="w-32 h-32 rounded-lg object-cover" />
<div className="flex-1">
<h3 className="text-xl font-semibold text-gray-900 mb-2">Premium Bluetooth Speaker</h3>
<p className="text-gray-600 mb-4">JBL GO 3 - Waterproof, Portable Wireless Speaker</p>
<!-- Options -->
<div className="grid grid-cols-2 gap-4 mb-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Color</label>
<select className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
<option>Black</option>
<option>Blue</option>
<option>Red</option>
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Size</label>
<select className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
<option>Standard</option>
<option>Large</option>
</select>
</div>
</div>
<!-- Quantity and Price -->
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<span className="text-sm font-medium text-gray-700">Quantity:</span>
<div className="flex items-center space-x-2">
<button className="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center text-gray-600 hover:bg-gray-300">-</button>
<span className="text-sm font-medium w-8 text-center">2</span>
<button className="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center text-gray-600 hover:bg-gray-300">+</button>
</div>
</div>
<div className="text-right">
<p className="text-2xl font-bold text-purple-600">$149.98</p>
<p className="text-sm text-gray-500">$74.99 each</p>
</div>
</div>
<!-- Actions -->
<div className="flex items-center justify-between mt-6 pt-4 border-t border-gray-200">
<button className="text-gray-400 hover:text-red-500 flex items-center space-x-1">
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="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" />
</svg>
<span className="text-sm">Remove</span>
</button>
<button className="text-purple-600 hover:text-purple-800 font-medium">Save for Later</button>
</div>
</div>
</div>
</div>
);
}3. Cart Summary
Cart summary with subtotal, tax, shipping, and total calculations.
Order Summary
Subtotal
$349.97
Tax
$27.99
Shipping
$9.99
Total
$387.95
<!-- Cart Summary -->
<div class="bg-white rounded-lg shadow-lg p-6">
<h3 class="text-lg font-semibold mb-4">Order Summary</h3>
<div class="space-y-3">
<div class="flex justify-between">
<span class="text-gray-600">Subtotal</span>
<span class="font-medium">$349.97</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Tax</span>
<span class="font-medium">$27.99</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Shipping</span>
<span class="font-medium">$9.99</span>
</div>
<hr class="my-3">
<div class="flex justify-between text-lg font-bold">
<span>Total</span>
<span class="text-purple-600">$387.95</span>
</div>
</div>
<button class="w-full mt-6 bg-purple-600 text-white py-3 px-4 rounded-lg font-semibold hover:bg-purple-700 transition-colors">
Proceed to Checkout
</button>
</div><template>
<!-- Cart Summary -->
<div class="bg-white rounded-lg shadow-lg p-6">
<h3 class="text-lg font-semibold mb-4">Order Summary</h3>
<div class="space-y-3">
<div class="flex justify-between">
<span class="text-gray-600">Subtotal</span>
<span class="font-medium">$349.97</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Tax</span>
<span class="font-medium">$27.99</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Shipping</span>
<span class="font-medium">$9.99</span>
</div>
<hr class="my-3">
<div class="flex justify-between text-lg font-bold">
<span>Total</span>
<span class="text-purple-600">$387.95</span>
</div>
</div>
<button class="w-full mt-6 bg-purple-600 text-white py-3 px-4 rounded-lg font-semibold hover:bg-purple-700 transition-colors">
Proceed to Checkout
</button>
</div>
</template>export default function CartSummary() {
return (
<div className="bg-white rounded-lg shadow-lg p-6">
<h3 className="text-lg font-semibold mb-4">Order Summary</h3>
<div className="space-y-3">
<div className="flex justify-between">
<span className="text-gray-600">Subtotal</span>
<span className="font-medium">$349.97</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600">Tax</span>
<span className="font-medium">$27.99</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600">Shipping</span>
<span className="font-medium">$9.99</span>
</div>
<hr className="my-3" />
<div className="flex justify-between text-lg font-bold">
<span>Total</span>
<span className="text-purple-600">$387.95</span>
</div>
</div>
<button className="w-full mt-6 bg-purple-600 text-white py-3 px-4 rounded-lg font-semibold hover:bg-purple-700 transition-colors">
Proceed to Checkout
</button>
</div>
);
}4. Floating Cart with Progress
Modern floating cart with progress indicator, item count, and quick actions for seamless shopping experience.
Free shipping
$25.00 left
Wireless Headphones
$299.99
Bluetooth Speaker
$74.99
Total
$449.97
<!-- Floating Cart with Progress -->
<div class="absolute bottom-6 right-6 z-50">
<div class="bg-white rounded-2xl shadow-2xl border border-gray-200 p-4 w-80">
<!-- Header -->
<div class="flex items-center justify-between mb-4">
<div class="flex items-center space-x-2">
<div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
<svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m0 0L7 13m0 0l-1.1 5H19M7 13l-1.1 5M7 13l2.8 2.2a1 1 0 000 1.4l-1.4 1.4a1 1 0 01-1.4 0L3 16"/>
</svg>
</div>
<span class="font-semibold text-gray-900">Your Cart</span>
</div>
<button class="text-gray-400 hover:text-gray-600">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
<!-- Progress Bar -->
<div class="mb-4">
<div class="flex items-center justify-between text-sm text-gray-600 mb-2">
<span>Free shipping</span>
<span>$25.00 left</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-purple-600 h-2 rounded-full" style="width: 60%"></div>
</div>
</div>
<!-- Cart Items -->
<div class="space-y-3 mb-4 max-h-32 overflow-y-auto">
<div class="flex items-center space-x-3">
<img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=40&h=40&fit=crop" alt="Product" class="w-10 h-10 rounded-lg object-cover">
<div class="flex-1">
<p class="text-sm font-medium text-gray-900">Wireless Headphones</p>
<p class="text-xs text-gray-500">$299.99</p>
</div>
<span class="text-sm font-semibold text-purple-600">$299.99</span>
</div>
<div class="flex items-center space-x-3">
<img src="https://images.unsplash.com/photo-1549298916-b41d501d3772?w=40&h=40&fit=crop" alt="Product" class="w-10 h-10 rounded-lg object-cover">
<div class="flex-1">
<p class="text-sm font-medium text-gray-900">Bluetooth Speaker</p>
<p class="text-xs text-gray-500">$74.99</p>
</div>
<span class="text-sm font-semibold text-purple-600">$149.98</span>
</div>
</div>
<!-- Total -->
<div class="border-t border-gray-200 pt-4 mb-4">
<div class="flex items-center justify-between">
<span class="font-semibold text-gray-900">Total</span>
<span class="text-lg font-bold text-purple-600">$449.97</span>
</div>
</div>
<!-- Actions -->
<div class="space-y-2">
<button class="w-full bg-purple-600 text-white py-2 px-4 rounded-lg font-semibold hover:bg-purple-700 transition-colors">
View Cart
</button>
<button class="w-full bg-gray-100 text-gray-900 py-2 px-4 rounded-lg font-semibold hover:bg-gray-200 transition-colors">
Continue Shopping
</button>
</div>
</div>
</div><template>
<!-- Floating Cart with Progress -->
<div class="absolute bottom-6 right-6 z-50">
<div class="bg-white rounded-2xl shadow-2xl border border-gray-200 p-4 w-80">
<!-- Header -->
<div class="flex items-center justify-between mb-4">
<div class="flex items-center space-x-2">
<div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
<svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m0 0L7 13m0 0l-1.1 5H19M7 13l-1.1 5M7 13l2.8 2.2a1 1 0 000 1.4l-1.4 1.4a1 1 0 01-1.4 0L3 16"/>
</svg>
</div>
<span class="font-semibold text-gray-900">Your Cart</span>
</div>
<button class="text-gray-400 hover:text-gray-600">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
<!-- Progress Bar -->
<div class="mb-4">
<div class="flex items-center justify-between text-sm text-gray-600 mb-2">
<span>Free shipping</span>
<span>$25.00 left</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-purple-600 h-2 rounded-full" style="width: 60%"></div>
</div>
</div>
<!-- Cart Items -->
<div class="space-y-3 mb-4 max-h-32 overflow-y-auto">
<div class="flex items-center space-x-3">
<img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=40&h=40&fit=crop" alt="Product" class="w-10 h-10 rounded-lg object-cover">
<div class="flex-1">
<p class="text-sm font-medium text-gray-900">Wireless Headphones</p>
<p class="text-xs text-gray-500">$299.99</p>
</div>
<span class="text-sm font-semibold text-purple-600">$299.99</span>
</div>
<div class="flex items-center space-x-3">
<img src="https://images.unsplash.com/photo-1549298916-b41d501d3772?w=40&h=40&fit=crop" alt="Product" class="w-10 h-10 rounded-lg object-cover">
<div class="flex-1">
<p class="text-sm font-medium text-gray-900">Bluetooth Speaker</p>
<p class="text-xs text-gray-500">$74.99</p>
</div>
<span class="text-sm font-semibold text-purple-600">$149.98</span>
</div>
</div>
<!-- Total -->
<div class="border-t border-gray-200 pt-4 mb-4">
<div class="flex items-center justify-between">
<span class="font-semibold text-gray-900">Total</span>
<span class="text-lg font-bold text-purple-600">$449.97</span>
</div>
</div>
<!-- Actions -->
<div class="space-y-2">
<button class="w-full bg-purple-600 text-white py-2 px-4 rounded-lg font-semibold hover:bg-purple-700 transition-colors">
View Cart
</button>
<button class="w-full bg-gray-100 text-gray-900 py-2 px-4 rounded-lg font-semibold hover:bg-gray-200 transition-colors">
Continue Shopping
</button>
</div>
</div>
</div>
</template>export default function FloatingCart() {
return (
<div className="absolute bottom-6 right-6 z-50">
<div className="bg-white rounded-2xl shadow-2xl border border-gray-200 p-4 w-80">
<!-- Header -->
<div className="flex items-center justify-between mb-4">
<div className="flex items-center space-x-2">
<div className="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
<svg className="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m0 0L7 13m0 0l-1.1 5H19M7 13l-1.1 5M7 13l2.8 2.2a1 1 0 000 1.4l-1.4 1.4a1 1 0 01-1.4 0L3 16" />
</svg>
</div>
<span className="font-semibold text-gray-900">Your Cart</span>
</div>
<button className="text-gray-400 hover:text-gray-600">
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Progress Bar -->
<div className="mb-4">
<div className="flex items-center justify-between text-sm text-gray-600 mb-2">
<span>Free shipping</span>
<span>$25.00 left</span>
</div>
<div className="w-full bg-gray-200 rounded-full h-2">
<div className="bg-purple-600 h-2 rounded-full" style= {{width: '60%'}}></div>
</div>
</div>
<!-- Cart Items -->
<div className="space-y-3 mb-4 max-h-32 overflow-y-auto">
<div className="flex items-center space-x-3">
<img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=40&h=40&fit=crop" alt="Product" className="w-10 h-10 rounded-lg object-cover" />
<div className="flex-1">
<p className="text-sm font-medium text-gray-900">Wireless Headphones</p>
<p className="text-xs text-gray-500">$299.99</p>
</div>
<span className="text-sm font-semibold text-purple-600">$299.99</span>
</div>
<div className="flex items-center space-x-3">
<img src="https://images.unsplash.com/photo-1549298916-b41d501d3772?w=40&h=40&fit=crop" alt="Product" className="w-10 h-10 rounded-lg object-cover" />
<div className="flex-1">
<p className="text-sm font-medium text-gray-900">Bluetooth Speaker</p>
<p className="text-xs text-gray-500">$74.99</p>
</div>
<span className="text-sm font-semibold text-purple-600">$149.98</span>
</div>
</div>
<!-- Total -->
<div className="border-t border-gray-200 pt-4 mb-4">
<div className="flex items-center justify-between">
<span className="font-semibold text-gray-900">Total</span>
<span className="text-lg font-bold text-purple-600">$449.97</span>
</div>
</div>
<!-- Actions -->
<div className="space-y-2">
<button className="w-full bg-purple-600 text-white py-2 px-4 rounded-lg font-semibold hover:bg-purple-700 transition-colors">
View Cart
</button>
<button className="w-full bg-gray-100 text-gray-900 py-2 px-4 rounded-lg font-semibold hover:bg-gray-200 transition-colors">
Continue Shopping
</button>
</div>
</div>
</div>
);
}5. Cart with Discount Codes
Advanced cart with discount code input, applied discounts display, and savings calculation for enhanced user experience.
Wireless Headphones
Sony WH-1000XM4
Qty: 1
Bluetooth Speaker
JBL GO 3
Qty: 2
Try: SAVE10, WELCOME20
SAVE10 Applied
-$44.99
Subtotal
$449.97
Shipping
$9.99
Discount (SAVE10)
-$44.99
Tax
$32.50
Total
$447.47
You saved $44.99 with this discount!
<!-- Cart with Discount Codes -->
<div class="bg-white rounded-lg shadow-lg p-6">
<!-- Cart Items -->
<div class="space-y-4 mb-6">
<div class="flex items-center justify-between py-4 border-b border-gray-200">
<div class="flex items-center space-x-4">
<img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=60&h=60&fit=crop" alt="Product" class="w-16 h-16 rounded-lg object-cover">
<div>
<h3 class="font-semibold text-gray-900">Wireless Headphones</h3>
<p class="text-sm text-gray-600">Sony WH-1000XM4</p>
<p class="text-sm text-gray-500">Qty: 1</p>
</div>
</div>
<span class="text-lg font-semibold text-purple-600">$299.99</span>
</div>
<div class="flex items-center justify-between py-4 border-b border-gray-200">
<div class="flex items-center space-x-4">
<img src="https://images.unsplash.com/photo-1549298916-b41d501d3772?w=60&h=60&fit=crop" alt="Product" class="w-16 h-16 rounded-lg object-cover">
<div>
<h3 class="font-semibold text-gray-900">Bluetooth Speaker</h3>
<p class="text-sm text-gray-600">JBL GO 3</p>
<p class="text-sm text-gray-500">Qty: 2</p>
</div>
</div>
<span class="text-lg font-semibold text-purple-600">$149.98</span>
</div>
</div>
<!-- Discount Code Section -->
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-2">Discount Code</label>
<div class="flex space-x-2">
<input type="text" placeholder="Enter code" class="flex-1 border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
<button class="bg-purple-600 text-white px-4 py-2 rounded-md font-semibold hover:bg-purple-700 transition-colors">
Apply
</button>
</div>
<p class="text-xs text-gray-500 mt-1">Try: SAVE10, WELCOME20</p>
</div>
<!-- Applied Discounts -->
<div class="mb-6">
<div class="bg-green-50 border border-green-200 rounded-md p-3 mb-2">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<span class="text-sm font-medium text-green-800">SAVE10 Applied</span>
</div>
<span class="text-sm font-semibold text-green-600">-$44.99</span>
</div>
</div>
</div>
<!-- Order Summary -->
<div class="border-t border-gray-200 pt-4">
<div class="space-y-2 mb-4">
<div class="flex justify-between text-sm">
<span class="text-gray-600">Subtotal</span>
<span>$449.97</span>
</div>
<div class="flex justify-between text-sm">
<span class="text-gray-600">Shipping</span>
<span>$9.99</span>
</div>
<div class="flex justify-between text-sm text-green-600">
<span>Discount (SAVE10)</span>
<span>-$44.99</span>
</div>
<div class="flex justify-between text-sm">
<span class="text-gray-600">Tax</span>
<span>$32.50</span>
</div>
</div>
<hr class="my-3">
<div class="flex justify-between text-lg font-bold mb-4">
<span>Total</span>
<span class="text-purple-600">$447.47</span>
</div>
<div class="bg-green-50 border border-green-200 rounded-md p-3 mb-4">
<p class="text-sm text-green-800 font-medium">You saved $44.99 with this discount!</p>
</div>
<button class="w-full bg-purple-600 text-white py-3 px-4 rounded-lg font-semibold hover:bg-purple-700 transition-colors">
Proceed to Checkout
</button>
</div>
</div><template>
<!-- Cart with Discount Codes -->
<div class="bg-white rounded-lg shadow-lg p-6">
<!-- Cart Items -->
<div class="space-y-4 mb-6">
<div class="flex items-center justify-between py-4 border-b border-gray-200">
<div class="flex items-center space-x-4">
<img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=60&h=60&fit=crop" alt="Product" class="w-16 h-16 rounded-lg object-cover">
<div>
<h3 class="font-semibold text-gray-900">Wireless Headphones</h3>
<p class="text-sm text-gray-600">Sony WH-1000XM4</p>
<p class="text-sm text-gray-500">Qty: 1</p>
</div>
</div>
<span class="text-lg font-semibold text-purple-600">$299.99</span>
</div>
<div class="flex items-center justify-between py-4 border-b border-gray-200">
<div class="flex items-center space-x-4">
<img src="https://images.unsplash.com/photo-1549298916-b41d501d3772?w=60&h=60&fit=crop" alt="Product" class="w-16 h-16 rounded-lg object-cover">
<div>
<h3 class="font-semibold text-gray-900">Bluetooth Speaker</h3>
<p class="text-sm text-gray-600">JBL GO 3</p>
<p class="text-sm text-gray-500">Qty: 2</p>
</div>
</div>
<span class="text-lg font-semibold text-purple-600">$149.98</span>
</div>
</div>
<!-- Discount Code Section -->
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-2">Discount Code</label>
<div class="flex space-x-2">
<input type="text" placeholder="Enter code" class="flex-1 border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
<button class="bg-purple-600 text-white px-4 py-2 rounded-md font-semibold hover:bg-purple-700 transition-colors">
Apply
</button>
</div>
<p class="text-xs text-gray-500 mt-1">Try: SAVE10, WELCOME20</p>
</div>
<!-- Applied Discounts -->
<div class="mb-6">
<div class="bg-green-50 border border-green-200 rounded-md p-3 mb-2">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<span class="text-sm font-medium text-green-800">SAVE10 Applied</span>
</div>
<span class="text-sm font-semibold text-green-600">-$44.99</span>
</div>
</div>
</div>
<!-- Order Summary -->
<div class="border-t border-gray-200 pt-4">
<div class="space-y-2 mb-4">
<div class="flex justify-between text-sm">
<span class="text-gray-600">Subtotal</span>
<span>$449.97</span>
</div>
<div class="flex justify-between text-sm">
<span class="text-gray-600">Shipping</span>
<span>$9.99</span>
</div>
<div class="flex justify-between text-sm text-green-600">
<span>Discount (SAVE10)</span>
<span>-$44.99</span>
</div>
<div class="flex justify-between text-sm">
<span class="text-gray-600">Tax</span>
<span>$32.50</span>
</div>
</div>
<hr class="my-3">
<div class="flex justify-between text-lg font-bold mb-4">
<span>Total</span>
<span class="text-purple-600">$447.47</span>
</div>
<div class="bg-green-50 border border-green-200 rounded-md p-3 mb-4">
<p class="text-sm text-green-800 font-medium">You saved $44.99 with this discount!</p>
</div>
<button class="w-full bg-purple-600 text-white py-3 px-4 rounded-lg font-semibold hover:bg-purple-700 transition-colors">
Proceed to Checkout
</button>
</div>
</div>
</template>export default function CartWithDiscounts() {
return (
<div className="bg-white rounded-lg shadow-lg p-6">
<!-- Cart Items -->
<div className="space-y-4 mb-6">
<div className="flex items-center justify-between py-4 border-b border-gray-200">
<div className="flex items-center space-x-4">
<img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=60&h=60&fit=crop" alt="Product" className="w-16 h-16 rounded-lg object-cover" />
<div>
<h3 className="font-semibold text-gray-900">Wireless Headphones</h3>
<p className="text-sm text-gray-600">Sony WH-1000XM4</p>
<p className="text-sm text-gray-500">Qty: 1</p>
</div>
</div>
<span className="text-lg font-semibold text-purple-600">$299.99</span>
</div>
<div className="flex items-center justify-between py-4 border-b border-gray-200">
<div className="flex items-center space-x-4">
<img src="https://images.unsplash.com/photo-1549298916-b41d501d3772?w=60&h=60&fit=crop" alt="Product" className="w-16 h-16 rounded-lg object-cover" />
<div>
<h3 className="font-semibold text-gray-900">Bluetooth Speaker</h3>
<p className="text-sm text-gray-600">JBL GO 3</p>
<p className="text-sm text-gray-500">Qty: 2</p>
</div>
</div>
<span className="text-lg font-semibold text-purple-600">$149.98</span>
</div>
</div>
<!-- Discount Code Section -->
<div className="mb-6">
<label className="block text-sm font-medium text-gray-700 mb-2">Discount Code</label>
<div className="flex space-x-2">
<input type="text" placeholder="Enter code" className="flex-1 border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500" />
<button className="bg-purple-600 text-white px-4 py-2 rounded-md font-semibold hover:bg-purple-700 transition-colors">
Apply
</button>
</div>
<p className="text-xs text-gray-500 mt-1">Try: SAVE10, WELCOME20</p>
</div>
<!-- Applied Discounts -->
<div className="mb-6">
<div className="bg-green-50 border border-green-200 rounded-md p-3 mb-2">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-2">
<svg className="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
<span className="text-sm font-medium text-green-800">SAVE10 Applied</span>
</div>
<span className="text-sm font-semibold text-green-600">-$44.99</span>
</div>
</div>
</div>
<!-- Order Summary -->
<div className="border-t border-gray-200 pt-4">
<div className="space-y-2 mb-4">
<div className="flex justify-between text-sm">
<span className="text-gray-600">Subtotal</span>
<span>$449.97</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-gray-600">Shipping</span>
<span>$9.99</span>
</div>
<div className="flex justify-between text-sm text-green-600">
<span>Discount (SAVE10)</span>
<span>-$44.99</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-gray-600">Tax</span>
<span>$32.50</span>
</div>
</div>
<hr className="my-3" />
<div className="flex justify-between text-lg font-bold mb-4">
<span>Total</span>
<span className="text-purple-600">$447.47</span>
</div>
<div className="bg-green-50 border border-green-200 rounded-md p-3 mb-4">
<p className="text-sm text-green-800 font-medium">You saved $44.99 with this discount!</p>
</div>
<button className="w-full bg-purple-600 text-white py-3 px-4 rounded-lg font-semibold hover:bg-purple-700 transition-colors">
Proceed to Checkout
</button>
</div>
</div>
);
}