Shoping Cart Using Tailwind UI
A Tailwind-designed shopping cart is a sleek and user-friendly solution for effortless online shopping experiences.
table
Loading component...
133 lines
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet"
/>
<style>
.body {
font-family: "Plus Jakarta Sans", sans-serif;
}
</style>
<div
class="w-full px-4 mx-auto my-16 overflow-hidden bg-white rounded-lg md:max-w-6xl"
>
<div
class="block border border-gray-400 rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700"
>
<div
class="px-6 py-3 border-b-2 border-neutral-100 dark:border-neutral-600 dark:text-neutral-50"
>
<div class="flex items-center justify-between px-6 py-3 bg-gray-100">
<h3 class="font-semibold text-gray-900">Cart (3 Items)</h3>
<button
class="px-4 py-2 text-white bg-red-500 rounded-lg hover:bg-red-600"
>
Remove all
</button>
</div>
</div>
<div class="p-6">
<div class="flex flex-col">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 sm:px-6 lg:px-8">
<div class="overflow-hidden">
<table class="min-w-full text-sm font-light text-left">
<thead
class="text-base font-medium text-gray-900 border-b dark:border-neutral-500"
>
<tr>
<th scope="col" class="px-6 py-4">Image</th>
<th scope="col" class="px-6 py-4">Product Name</th>
<th scope="col" class="px-6 py-4">Quantity</th>
<th scope="col" class="px-6 py-4">Price</th>
<th scope="col" class="px-6 py-4">Sub Total</th>
<th scope="col" class="px-6 py-4">Handle</th>
</tr>
</thead>
<tbody class="font-medium text-gray-800">
<tr class="border-b dark:border-neutral-500">
<td class="px-6 py-4 whitespace-nowrap">
<img
class="object-cover w-32 h-32 rounded"
src="https://images.unsplash.com/photo-1632054403858-c61d4a985a42?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fG1vbnN0ZXJhJTIwZGVsaWNpb3NhJTIwYmFja2dyb3VuZCUyMHdoaXRlfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
alt="Product Image"
/>
</td>
<td class="px-6 py-4 whitespace-nowrap">
Monstera Deliciosa
</td>
<td class="px-6 py-4 whitespace-nowrap">2</td>
<td class="px-6 py-4 whitespace-nowrap">$20.00</td>
<td class="px-6 py-4 whitespace-nowrap">$40.00</td>
<td class="px-6 py-4 whitespace-nowrap">
<button
class="px-4 py-2 ml-auto text-white bg-red-500 rounded-lg hover:bg-red-600"
>
Remove
</button>
</td>
</tr>
<tr class="border-b dark:border-neutral-500">
<td class="px-6 py-4 whitespace-nowrap">
<img
class="object-cover w-32 h-32 rounded"
src="https://images.unsplash.com/photo-1490370946242-34092dbf29f8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8U3VjY3VsZW50JTIwTWl4fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
alt="Product Image"
/>
</td>
<td class="px-6 py-4 whitespace-nowrap">Succulent Mix</td>
<td class="px-6 py-4 whitespace-nowrap">1</td>
<td class="px-6 py-4 whitespace-nowrap">$10.00</td>
<td class="px-6 py-4 whitespace-nowrap">$10.00</td>
<td class="px-6 py-4 whitespace-nowrap">
<button
class="px-4 py-2 ml-auto text-white bg-red-500 rounded-lg hover:bg-red-600"
>
Remove
</button>
</td>
</tr>
<tr class="border-b dark:border-neutral-500">
<td class="px-6 py-4 whitespace-nowrap">
<img
class="object-cover w-32 h-32 rounded"
src="https://images.unsplash.com/photo-1657743089118-ee02d50d6938?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8UHVyaW5nfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
alt="Product Image"
/>
</td>
<td class="px-6 py-4 whitespace-nowrap">Puring Jepang</td>
<td class="px-6 py-4 whitespace-nowrap">$4.00</td>
<td class="px-6 py-4 whitespace-nowrap">$15.00</td>
<td class="px-6 py-4 whitespace-nowrap">$60.00</td>
<td class="px-6 py-4 whitespace-nowrap">
<button
class="px-4 py-2 ml-auto text-white bg-red-500 rounded-lg hover:bg-red-600"
>
Remove
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div
class="px-6 py-3 border-t-2 border-neutral-100 dark:border-neutral-600 dark:text-neutral-50"
>
<div class="flex items-center justify-between px-6 py-3 bg-gray-100">
<h3 class="font-semibold text-gray-900">Total: $110.00</h3>
<button
class="px-4 py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-600"
>
Checkout now
</button>
</div>
</div>
</div>
</div>