HTML code
This is the html code used to create this tailwind snippet
Download<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping Cart - Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 pt-5">
<div class="container mx-auto px-4">
<div class="flex flex-col xl:flex-row gap-6">
<!-- Left Column - Cart Items -->
<div class="xl:w-2/3">
<!-- Product 1 -->
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 mb-6">
<div class="p-6">
<div class="flex items-start border-b border-gray-200 pb-3">
<div class="mr-4">
<img src="https://www.bootdey.com/image/380x380/008B8B/000000" alt="Waterproof Mobile Phone" class="w-20 h-20 rounded">
</div>
<div class="flex-1 self-center overflow-hidden">
<div>
<h5 class="text-lg font-medium text-gray-800 truncate">
<a href="#" class="hover:text-gray-600">Waterproof Mobile Phone</a>
</h5>
<p class="text-gray-600 mb-0 flex items-center gap-0.5">
<svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20">
<path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/>
</svg>
<svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20">
<path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/>
</svg>
<svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20">
<path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/>
</svg>
<svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20">
<path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/>
</svg>
<svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20">
<path d="M10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545L10 15l-5.878 3.09V15z"/>
</svg>
</p>
<p class="mb-0 mt-1 text-sm text-gray-700">Color : <span class="font-medium">Gray</span></p>
</div>
</div>
<div class="flex-shrink-0 ml-2">
<ul class="flex items-center gap-1 mb-0 text-base">
<li>
<a href="#" class="text-gray-600 px-1 hover:text-red-500">
<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="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>
</a>
</li>
<li>
<a href="#" class="text-gray-600 px-1 hover:text-red-500">
<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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
</svg>
</a>
</li>
</ul>
</div>
</div>
<div>
<div class="flex flex-col md:flex-row md:items-end gap-4 md:gap-0">
<div class="md:w-1/3">
<div class="mt-3">
<p class="text-gray-600 mb-2 text-sm">Price</p>
<h5 class="mb-0 mt-2 text-lg">
<span class="text-gray-400 mr-2">
<del class="text-base font-normal">$500</del>
</span>
$450
</h5>
</div>
</div>
<div class="md:w-5/12">
<div class="mt-3">
<p class="text-gray-600 mb-2 text-sm">Quantity</p>
<div class="inline-flex">
<select class="block w-40 px-3 py-1.5 text-sm border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
</div>
</div>
<div class="md:w-1/4">
<div class="mt-3">
<p class="text-gray-600 mb-2 text-sm">Total</p>
<h5 class="text-lg">$900</h5>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Product 2 -->
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 mb-6">
<div class="p-6">
<div class="flex items-start border-b border-gray-200 pb-3">
<div class="mr-4">
<img src="https://www.bootdey.com/image/380x380/FF00FF/000000" alt="Smartphone Dual Camera" class="w-20 h-20 rounded">
</div>
<div class="flex-1 self-center overflow-hidden">
<div>
<h5 class="text-lg font-medium text-gray-800 truncate">
<a href="#" class="hover:text-gray-600">Smartphone Dual Camera</a>
</h5>
<p class="text-gray-600 mb-0 flex items-center gap-0.5">
<svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20">
<path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/>
</svg>
<svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20">
<path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/>
</svg>
<svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20">
<path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/>
</svg>
<svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20">
<path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/>
</svg>
</p>
<p class="mb-0 mt-1 text-sm text-gray-700">Color : <span class="font-medium">Green</span></p>
</div>
</div>
<div class="flex-shrink-0 ml-2">
<ul class="flex items-center gap-1 mb-0 text-base">
<li>
<a href="#" class="text-gray-600 px-1 hover:text-red-500">
<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="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>
</a>
</li>
<li>
<a href="#" class="text-gray-600 px-1 hover:text-red-500">
<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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
</svg>
</a>
</li>
</ul>
</div>
</div>
<div>
<div class="flex flex-col md:flex-row md:items-end gap-4 md:gap-0">
<div class="md:w-1/3">
<div class="mt-3">
<p class="text-gray-600 mb-2 text-sm">Price</p>
<h5 class="mb-0 mt-2 text-lg">
<span class="text-gray-400 mr-2">
<del class="text-base font-normal">$280</del>
</span>
$240
</h5>
</div>
</div>
<div class="md:w-5/12">
<div class="mt-3">
<p class="text-gray-600 mb-2 text-sm">Quantity</p>
<div class="inline-flex">
<select class="block w-40 px-3 py-1.5 text-sm border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected>3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
</div>
</div>
<div class="md:w-1/4">
<div class="mt-3">
<p class="text-gray-600 mb-2 text-sm">Total</p>
<h5 class="text-lg">$720</h5>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Product 3 -->
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 mb-6">
<div class="p-6">
<div class="flex items-start border-b border-gray-200 pb-3">
<div class="mr-4">
<img src="https://www.bootdey.com/image/380x380/FF8C00/000000" alt="Black Colour Smartphone" class="w-20 h-20 rounded">
</div>
<div class="flex-1 self-center overflow-hidden">
<div>
<h5 class="text-lg font-medium text-gray-800 truncate">
<a href="#" class="hover:text-gray-600">Black Colour Smartphone</a>
</h5>
<p class="text-gray-600 mb-0 flex items-center gap-0.5">
<svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20">
<path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/>
</svg>
<svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20">
<path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/>
</svg>
<svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20">
<path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/>
</svg>
</p>
<p class="mb-0 mt-1 text-sm text-gray-700">Color : <span class="font-medium">Blue</span></p>
</div>
</div>
<div class="flex-shrink-0 ml-2">
<ul class="flex items-center gap-1 mb-0 text-base">
<li>
<a href="#" class="text-gray-600 px-1 hover:text-red-500">
<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="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>
</a>
</li>
<li>
<a href="#" class="text-gray-600 px-1 hover:text-red-500">
<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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
</svg>
</a>
</li>
</ul>
</div>
</div>
<div>
<div class="flex flex-col md:flex-row md:items-end gap-4 md:gap-0">
<div class="md:w-1/3">
<div class="mt-3">
<p class="text-gray-600 mb-2 text-sm">Price</p>
<h5 class="mb-0 mt-2 text-lg">
<span class="text-gray-400 mr-2">
<del class="text-base font-normal">$750</del>
</span>
$950
</h5>
</div>
</div>
<div class="md:w-5/12">
<div class="mt-3">
<p class="text-gray-600 mb-2 text-sm">Quantity</p>
<div class="inline-flex">
<select class="block w-40 px-3 py-1.5 text-sm border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
</div>
</div>
<div class="md:w-1/4">
<div class="mt-3">
<p class="text-gray-600 mb-2 text-sm">Total</p>
<h5 class="text-lg">$950</h5>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Action Buttons -->
<div class="flex flex-col sm:flex-row justify-between gap-4 my-4">
<div>
<a href="#" class="inline-flex items-center text-gray-600 hover:text-gray-800 transition-colors">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
</svg>
Continue Shopping
</a>
</div>
<div class="text-left sm:text-right">
<a href="#" class="inline-flex items-center px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 transition-colors">
<svg class="w-4 h-4 mr-1" 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.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
</svg>
Checkout
</a>
</div>
</div>
</div>
<!-- Right Column - Order Summary -->
<div class="xl:w-1/3">
<div class="mt-5 lg:mt-0">
<div class="bg-white rounded-2xl shadow-sm border border-gray-200">
<div class="bg-transparent border-b border-gray-200 py-3 px-4 rounded-t-2xl">
<h5 class="text-base font-medium mb-0">
Order Summary
<span class="float-right">#MN0124</span>
</h5>
</div>
<div class="p-4 pt-2">
<div class="overflow-x-auto">
<table class="w-full mb-0">
<tbody>
<tr>
<td class="py-2 text-gray-700">Sub Total :</td>
<td class="py-2 text-right text-gray-700">$ 780</td>
</tr>
<tr>
<td class="py-2 text-gray-700">Discount :</td>
<td class="py-2 text-right text-gray-700">- $ 78</td>
</tr>
<tr>
<td class="py-2 text-gray-700">Shipping Charge :</td>
<td class="py-2 text-right text-gray-700">$ 25</td>
</tr>
<tr>
<td class="py-2 text-gray-700">Estimated Tax :</td>
<td class="py-2 text-right text-gray-700">$ 18.20</td>
</tr>
<tr class="bg-gray-50">
<th class="py-3 text-left font-semibold text-gray-800">Total :</th>
<td class="py-3 text-right">
<span class="font-bold text-gray-800">
$ 745.2
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>